javascript - 後台回傳的json資料結構太深怎麼遍歷出來

Question

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

##

Answer 1

同意樓上的，使用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);
    }
)();

結果如下

Answer 2

簡單回答：用函數。

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

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

Answer 3

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