iT邦幫忙

3

Jquery取物件陣列取值(演算法)

  • 分享至 

  • xImage

請教各位前輩

今天想要在一個多層陣列物件中(有4層),每一層的架構都一樣
如果想要取得最子層的name = Apple是包含在那些子層的下面
不知道有沒有推薦的方法,目前是使用往回推的方式但效果並不佳/images/emoticon/emoticon10.gif

ps: id: 不重複

說明: 取Apple會得到資料如下
[{"id": 718,"name": "第一層"},{"id": 733,"name": "Layer2_1"},{"id": 734,"name": "L3_A"}]

{
    "id": 718,
    "name": "第一層",
    "items": [
        {
            "id": 733,
            "name": "Layer2_1",
            "items": [
                {
                    "id": 734,
                    "name": "L3_A",
                    "items": [
                        {
                            "id": 758,
                            "name": "Apple",
                            "items": null
                        },
                        {
                            "id": 760,
                            "name": "Banana",
                            "items": null
                        },
                        {
                            "id": 761,
                            "name": "Coco",
                            "items": null
                        }
                    ]
                },
                {
                    "id": 764,
                    "name": "L3_AA",
                    "items": [
                        {
                            "id": 765,
                            "name": "Hamburger",
                            "items": null
                        }
                    ]
                }
            ]
        },
        {
            "id": 759,
            "name": "Layer2_2",
            "items": [
                {
                    "id": 762,
                    "name": "L3_B",
                    "items": [
                        {
                            "id": 763,
                            "name": "Dog",
                            "items": null
                        }
                    ]
                }
            ]
        }
    ]
}
ccutmis iT邦高手 2 級 ‧ 2019-09-25 12:36:35 檢舉
如果 id 跟 name 不重覆的話 我想我可以給些建議
hugo8319 iT邦新手 4 級 ‧ 2019-09-25 12:42:27 檢舉
id 不重複,已更正
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
6
dragonH
iT邦超人 5 級 ‧ 2019-09-25 14:35:48
最佳解答

codepen

大概寫法應該就這樣

應該是沒啥 bug 啦

應該啦..

你在自行轉成 jquery 的寫法 /images/emoticon/emoticon11.gif

看更多先前的回應...收起先前的回應...
hugo8319 iT邦新手 4 級 ‧ 2019-09-25 15:32:37 檢舉

感謝大大協助!!!!!!!!!!!!!!!!!!!!!!!!!!
花了一些時間才看懂,遞迴這種寫法光是看就有點吃力/images/emoticon/emoticon10.gif

dragonH iT邦超人 5 級 ‧ 2019-09-25 15:41:17 檢舉

我也好久沒寫遞迴了 XD

修了好久/images/emoticon/emoticon07.gif

ccutmis iT邦高手 2 級 ‧ 2019-09-25 15:46:40 檢舉

樓主有解決了就好,不過這個範例有個小問題就是
假如name重覆的話,例如把"name": "Dog" 改成 "name": "Apple"
有兩筆 "name": "Apple" 但只會顯示第一筆符合的。

hugo8319 iT邦新手 4 級 ‧ 2019-09-25 16:21:12 檢舉

我最後把name改成用id去判斷了,感謝提醒!!

小魚 iT邦大師 1 級 ‧ 2019-09-25 17:19:34 檢舉

那個問題應該是題目有問題吧...

dragonH iT邦超人 5 級 ‧ 2019-09-25 17:24:51 檢舉

什麼東東題目有問題 /images/emoticon/emoticon19.gif

ccutmis iT邦高手 2 級 ‧ 2019-09-25 17:35:16 檢舉

dragonH iT邦超人 5 級 ‧ 2019-09-25 18:34:42 檢舉

/images/emoticon/emoticon26.gif

0
小魚
iT邦大師 1 級 ‧ 2019-09-25 12:29:52

這是Json吧,
不是JQuery的問題...

看更多先前的回應...收起先前的回應...
ccutmis iT邦高手 2 級 ‧ 2019-09-25 12:33:36 檢舉

我覺得是 演算法 的問題...
/images/emoticon/emoticon77.gif

hugo8319 iT邦新手 4 級 ‧ 2019-09-25 12:44:27 檢舉

已更正,感謝提醒

小魚 iT邦大師 1 級 ‧ 2019-09-25 13:21:35 檢舉

其實你Google一下Json應該可以解決這個問題.

dragonH iT邦超人 5 級 ‧ 2019-09-25 13:34:29 檢舉

只 google Json 應該沒辦法解決

至少也要加個遞迴 /images/emoticon/emoticon39.gif

hugo8319 iT邦新手 4 級 ‧ 2019-09-25 14:02:29 檢舉

不好意思,因為google不到所以才上來發問
下面是我根據id去撈取的資料,依照我這種方式只能撈到第一層,如果需要撈到每一層的ID會比較花時間,所以想詢問看看有沒有其他方法可以比較有效率的查詢

小魚 iT邦大師 1 級 ‧ 2019-09-25 14:17:01 檢舉

查查看json.Parse能不能符合你的需求,
或許可以使用遞迴.

fillano iT邦超人 1 級 ‧ 2019-09-25 16:43:24 檢舉

這樣的結構叫做「樹」,資料應該不難找。關鍵字可以用「tree tranversal」

1
犬千賀
iT邦新手 3 級 ‧ 2019-09-26 18:04:08

練練手

依階層遞迴查找,id, name 可重複
支援搜尋所有name符合items(包含父階層)

function getPath( obj, KeyWord, FindAll ){
	let Path_arr =[];
	let path ={ id: obj.id, name: obj.name };
	
	if( obj.name==KeyWord ){
		Path_arr.push([ path ]);
	}
    if( obj.items!=null ){
        $.each( obj.items, function(i, _obj ){
            $.each( getPath( _obj, KeyWord, FindAll ), function(j, _path ){
                _path.unshift( path );
                Path_arr.push( _path );
            });
            if(!FindAll && Path_arr.length>0 ){ return false; }
        });
    }
	return Path_arr;
}

var obj ={...ry};
var Path_arr = getPath( obj, 'Apple', false );
console.log( Path_arr );

Results:
https://ithelp.ithome.com.tw/upload/images/20190926/20111199l4UX7174Ba.png

我要發表回答

立即登入回答