javascript - 後台回傳的json資料結構太深怎麼遍歷出來
某草草
某草草 2017-05-19 10:18:40
0
3
680

#這種結構的json資料我怎麼循環遍歷取到最深的哪一個,而且我用的是字串拼接的方法,下面渲染的話只能用一個for循環,有什麼辦法可以用一個大的for循環遍歷出數據嗎? ? ?求幫助

##
某草草
某草草

全部回覆(3)
漂亮男人

同意樓上的,使用js模板 例如artTemplate之類的。
如果你非要用字串拼接 那就是循環套循環。無非加一點文法糖而已。
如下。

(
    ()=>{
        const data=[
            {
                id:10,
                name:"jack",
                lists:[
                    {
                        item:"水泥",
                        num:323
                    },
                    {
                        item:"钢筋",
                        num:111
                    }
                ]
            },
            {
                id:15,
                name:"tom",
                lists:[
                    {
                        item:"西瓜",
                        num:44
                    },
                    {
                        item:"桔子",
                        num:66
                    }
                ]
            }
        ];
        
        const getHtml=({name,id,lists})=>`<li>
            <p>我叫${name},我的工号是${id}</p>
            <p>我有一批货物,它们分别是:</p>
            <section>
                ${lists}
            </section>
        </li>
        `;
        
        const getList=({item,num})=>`<p>货物名:${item},货物编号:${num}。</p>\n`;
        
        let result="";
        
        data.forEach(person=>{
            const {name,id}=person;
            let lists="",
                _lists=person.lists;
            _lists.forEach(list=>{
                const {item,num}=list;
                lists+=getList({item,num});
            });
            result+=getHtml({name,id,lists});
        });
        
        console.log(result);
    }
)();

結果如下

Ty80

簡單回答:用函數。

複雜回答:每一層 Object 使用一個函數轉換成一個字串,然後在最外層進行拼接。

更聰明的做法:別用 jQuery 啦。如果需要相容 IE9-,用 Knockout.js, avalon.js,如果那些老頭老太太可以被放棄,就用 VueJS, Angular 4.0+, React。然後給他們一個提示:你的瀏覽器太老了。

Ty80

這樣的話建議用 js 模板,自己拼接字串太麻煩

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板