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格式不正确。您复制密钥，名称应该是唯一的。这应该工作

{  
       "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);
            });


       });

Answer 2

如果您将其更改为：

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

您的代码将识别这两个对象，因此您无法像这样堆叠它们。 JSON会覆盖其属性，只能看到一个版本。您需要将其更改为数组。

从firebug登录：

对象{category1 = {...}，category2 = {...}}

您应该将功能更改为：

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

$(data.categories).each(function (index, data2) {
    var createButton = `
                <div class="col-md-6">
                    <button type="button" class="btn btn-default">
                        <a href="${data2.id}" 
                        target="_blank">${data2.title}</a>
                    </button>
                </div>
                `;
    document.getElementById('table').innerHTML += createButton;//add not set
});
}

$(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);
    }
});
});

数据到

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

Answer 3

我想你应该把这一行换成这样的东西：

$(data.categories).each(function (key, value) {
    console.log("title", value.title);
});

Answer 4

你把document.getElementById（'table'）。innerHTML = createButton;在每个循环中，这样你在表中写n次，每次只放最后一个“createButton” 我建议你在each（）循环之前初始化你的变量，然后连接每次迭代的每个响应，最后只将数据推送到innerHTML。

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

4 个答案: