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

Posted 2023-05-08

【中文标题】遍历从 ajax / json 接收到的数据

【英文标题】：Iterating over the data received from ajax / json

【发布时间】：2021-12-15 04:03:25

【问题描述】：

以下是我通过 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);
      ,
    );
  );
);

【问题讨论】：

value.fields.title?

您需要先从 json 解析 data.data 中的字符串，或者修复源，使数组不包含在引号中。 const arr = JSON.parse(data.data)

【参考方案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(""));
,

【讨论】：

我试过这个并且收到错误“TypeError：data.map 不是函数”。抱歉，我认为我收到的数据是对象而不是数组。我在问题中添加了对象的图片。你能帮我遍历这个对象来访问 title 和 slug 吗？

@haashe - 看起来像是服务器配置/编码错误，我已经更新了答案以稍微解释一下，并让您了解在修复服务器之前和之后应该做什么。编码愉快！