如何遍歷嵌套的JSON並在HTML DOM中附加

Question

我正在嘗試遍歷JSON並將其以嵌套方式附加到HTML。 我想要做的是為對象的標題添加Header標簽，並為項目的標題添加標簽。 某些對象可能也沒有項目為空。 我猜想嵌套循環是必需的，我已經嘗試實現它。 JSON看起來像：

[
    {
        "id": 1,
        "title": "Hello",
        "url": "http://localhost:8000/login/notes/1/",
        "description": "Hello nice",
        "created_at": "2019-08-10T06:02:55.468315Z",
        "created_by": "Dude",
        "items": [
            {
                "id": 1,
                "url": "http://localhost:8000/login/items/1/",
                "title": "baby's toy",
                "note": "http://localhost:8000/login/notes/1/"
            },
            {
                "id": 2,
                "url": "http://localhost:8000/login/items/2/",
                "title": "baby's toy",
                "note": "http://localhost:8000/login/notes/1/"
            },
            {
                "id": 4,
                "url": "http://localhost:8000/login/items/4/",
                "title": "postman5",
                "note": "http://localhost:8000/login/notes/1/"
            }
        ]
    },
    {
        "id": 2,
        "title": "abc",
        "url": "http://localhost:8000/login/notes/2/",
        "description": "asad",
        "created_at": "2019-08-10T15:23:53.074848Z",
        "created_by": "dude2",
        "items": [
            {
                "id": 5,
                "url": "http://localhost:8000/login/items/5/",
                "title": "Parrot Toy",
                "note": "http://localhost:8000/login/notes/2/"
            }
        ]
    }]

我試過了

 fetch('http://localhost:8000/login/notes/?format=json',{mode: 'cors'})
  .then(response => response.json())
  .then(data => {
    var output='';
  var final='';
  var semif='';
  var darif='';

      for (var i in data) {

      output+=i+'<h2>'+data[i].title +'</h2>'
      for(j in data[i].items){
      final+='<li>'+data[i].items[j].title+'</li>'

    }
    semif=output+final



      }

     document.getElementById('test').innerHTML=darif

  });

HTML

<p id="test">

</p>

我想要實現的是：

<h1>Hello</h1>
  <h5>baby's toy</h5>
  <h5>baby's toy</h5>
  <h5>postman5</h5>
<h1>abc</h1>
  <h5>parrot's toy</h5>

Answer 1

我強烈建議不要進行冗長的字符串連接。 字符串是不可變的對象，它們可以給您的系統帶來不必要的負擔。

另外，使用map和join更加優雅並且易於閱讀。

 const data = [ { "id": 1, "title": "Hello", "url": "http://localhost:8000/login/notes/1/", "description": "Hello nice", "created_at": "2019-08-10T06:02:55.468315Z", "created_by": "Dude", "items": [ { "id": 1, "url": "http://localhost:8000/login/items/1/", "title": "baby's toy", "note": "http://localhost:8000/login/notes/1/" }, { "id": 2, "url": "http://localhost:8000/login/items/2/", "title": "baby's toy", "note": "http://localhost:8000/login/notes/1/" }, { "id": 4, "url": "http://localhost:8000/login/items/4/", "title": "postman5", "note": "http://localhost:8000/login/notes/1/" } ] }, { "id": 2, "title": "abc", "url": "http://localhost:8000/login/notes/2/", "description": "asad", "created_at": "2019-08-10T15:23:53.074848Z", "created_by": "dude2", "items": [ { "id": 5, "url": "http://localhost:8000/login/items/5/", "title": "Parrot Toy", "note": "http://localhost:8000/login/notes/2/" } ] }] const result = data.map(el => { return `<h1>${el.title}</h1>` + el.items.map(el => `<h5>${el.title}</h5>`).join("") }).join("") console.log(result) 

Answer 2

fetch('http://localhost:8000/login/notes/?format=json',{mode: 'cors'})
.then(response => response.json())
.then(data => {

   var html = '';

   data.forEach(listItem => {

        const h1 = `<h1> ${listItem.title} </h1>`;
        html+=h1;

        listItem.items.forEach(item=> {
            const h5 = `<h5> ${item.title} </h5>`;
            html+=h5;
        });
   });

   document.getElementById('test').innerHTML=html;
});

我認為您可以使用它。