javascript - jQuery .each 方法返回最后一个值

Question

我觉得 .each() 方法并没有真正起作用。这是我的代码:

function makeHTML(data) {
console.info(data.categories);

$(data).each(function () {
    let createButton = `
                <div class="col-md-6">
                    <button type="button" class="btn btn-default">
                        <a href="${data.categories.category.id}" 
                        target="_blank">${data.categories.category.title}</a>
                    </button>
                </div>
                `;
    document.getElementById('table').innerHTML = createButton;
});
}

$(document).ready(function () {
$.ajax({
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    url: "json/data.json",
    dataType: "json",
    success: makeHTML,
    error: function (result) {
        console.error(result);
    }
});
});

它只返回 json 中的最后一组，如下所示:

{
  "categories": {
    "category": {
      "title": "Something",
      "id": 1
    },
    "category": {
      "title": "Something Else",
      "id": 2
    }
  }
}

我尝试添加调试器；紧接在innerHTML = createButton之后；观看循环，但它只进入 jQuery 一次。有点奇怪。我不知道我做错了什么？

Answer 1

问题是您使用的 JSON 格式不正确。您复制 key 并且名称应该是唯一的。这应该有效

{  
       "categories":[  
          {  
             "title":"Something",
             "id":1
          },
          {  
             "title":"Something Else",
             "id":2
          }
       ]
    }

另一件事是您尝试在表格上附加 div 元素，该表格必须包含行和列。因此，如果我理解你的问题，这就是你如何将 JSON 元素附加到表中的方式:HTML:

<table id='table'>

</table>

脚本变量:

 var categoriesJson = [  
          {  
             "title":"Something",
             "id":0
          },
          {  
             "title":"Something Else",
             "id":1
          }
       ]
 var result = '';

脚本代码:

 $(document).ready(function(){

            $.each(categoriesJson, function (i, item) {
                    result += "<tr><td><button id='"+item.id+"'>" + item.title + "</button></tr></td>"

                $('#table').append(result);
            });


       });