jQuery .each方法返回最后一个值 [英] jQuery .each method returning last value

问题描述

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

I feel like the .each() method isn't really working. Here is my code:

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中的最后一组，如下所示:

It's only returning the last set in the json which looks like this:

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

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

I tried adding debugger; immediately after the innerHTML = createButton; to watch the loop, but it goes into jQuery just once. It's weird. I don't know what I am doing wrong?

推荐答案

如果将其更改为:

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

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

Your code will recognize both objects, so you cannot stack them like that. JSON overwrites its attributes and sees only one version. You need to change it to an array.

从萤火虫登录:

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

Object { 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
    }
  ]
}

这篇关于jQuery .each方法返回最后一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！