遍历从 ajax / json 接收到的数据

Question

以下是我通过 ajax 获取的数据类型。

[{"model": "blogapp.articles", "pk": 1, "fields": {"title": "Rainbow Buildings in Tokyo", "slug": "Rainbow-Buildings-in-Tokyo"}}, {"model": "blogapp.articles", "pk": 2, "fields": {"title": "4 Cool Cube Facades", "slug": "4-Cool-Cube-Facades"}}]

如何使用 .each 遍历这些数据以获取每个条目的标题和 slug？

下面的代码给出了数据的语法错误。

app.js

$(document).ready(function () {
  $(".tag-nav-links").on("click", function (e) {
    e.stopPropagation();
    return $.ajax({
      type: "POST",
      url: "",
      dataType: "json",
      data: { filter: `${e.target.textContent}` },
      success: function (data) {
        var html = "";
        $(data).each(function (index, value) {
          html += "<h4>{{" + value.title + "}}</h4>";
        });
        $("trial").append(html);
      },
    });
  });
});

Answer 1

jQuery function（您正在像这样使用：$(data)）不是您想要的。 （你可能指的是$.each(data, ...)，但现在已经不需要了。）如果data 真的是一个数组，只需在其上使用map，然后将结果与一个空白字符串连接起来：

success: function (data) {
    $("trial").append(data.map(value => {
        return "<h4>{{" + value.fields.title + "]]</h4>";
    }).join(""));
},

---

如果data 真的如屏幕截图所示，那么它是一个具有data 属性的对象，其中包含一个JSON 字符串。这可能是服务器上的错误配置或编码错误，当前它返回的文本如下：

{"data":"[{\"model\": \"blogapp.articles\", \"pk\": 1,...

什么时候应该返回这样的东西：

{"data":[{"model":"blogapp.articles","pk":1,...

在将数据传递给 {"data": ___} 包装器中的任何包装物之前，先对数据进行预字符串化，然后对其进行字符串化并返回。

除非你修复它，否则你必须解析它两次。 jQuery 正在为你做其中之一，但你必须做第二个，之后你应该能够使用数组：

// Until/unless the server is fixed
success: function (data) {
    data = JSON.parse(data.data); // *** Second parse
    $("trial").append(data.map(value => {
        return "<h4>{{" + value.fields.title + "]]</h4>";
    }).join(""));
},

如果您修复服务器使其不是双字符串化，您将使用 data.data 代替（因为 data 是您的参数名称，它指的是具有 data 属性的对象，该属性具有您的数组想用）：

// After the server is fixed
success: function (data) {
    $("trial").append(data.data.map(value => {
    //                ^^^^^^^^^
        return "<h4>{{" + value.fields.title + "]]</h4>";
    }).join(""));
},