在带有 django json 响应的 Javascript 中使用 forEach答案

【问题标题】：Using forEach in Javascript with a django json response在带有 django json 响应的 Javascript 中使用 forEach
【发布时间】：2021-02-23 21:25:57
【问题描述】：

编辑

我找到了答案here。在进入 forEach 之前，我需要使用 JSON.parse() 解析数据

我有一个来自 django 的 json 响应，我正在尝试使用 javascript 将 json 响应中的每个项目显示为自己的 div。

json响应如下：

[{"model": "network.posts", "pk": 1, "fields": {"user": 1, "post": "hi", "timestamp": "2020-11-10T21:24:51.118Z"}}, {"model": "network.posts", "pk": 2, "fields": {"user": 1, "post": "My first post!", "timestamp": "2020-11-10T21:25:07.893Z"}}, {"model": "network.posts", "pk": 3, "fields": {"user": 2, "post": "This is my 3rd post :)", "timestamp": "2020-11-10T22:43:23.383Z"}}, {"model": "network.posts", "pk": 4, "fields": {"user": 2, "post": "This is my 3rd post :)", "timestamp": "2020-11-10T22:44:34.421Z"}}, {"model": "network.posts", "pk": 5, "fields": {"user": 2, "post": "This is my 3rd post :)", "timestamp": "2020-11-10T22:47:17.896Z"}}]

这来自 django 视图，即：

def get_posts (request):

    # Get list of posts
    posts = Posts.objects.all()

    if request.method == "GET":
        return JsonResponse(serializers.serialize('json', posts), safe=False)

现在我只是尝试使用 javascript 来控制台记录每个“帖子”。这是我目前所拥有的：

// Load all posts

fetch(`/posts`)
.then(response => response.json())
.then(data => {
  console.log(data);

});

这可行，但它会记录整个 json 响应。我想要做的是把它切碎，这样每个帖子都被单独记录，但我无法解决！我尝试像这样使用 ForEach：

// Load all posts

fetch(`/posts`)
.then(response => response.json())
.then(data => {
  console.log(data);

  data.forEach( () => {
    console.log(data);
  });
});

但我不断收到Uncaught (in promise) TypeError: data.ForEach is not a function的错误

我该如何解决这个问题？

【问题讨论】：

不确定这是不是拼写错误，但应该是data.forEach（注意大小写不同）。
另外，控制台记录您正在迭代的内容也没有意义。您记录迭代值
谢谢我更新了上面的错字。虽然似乎并没有完全解决问题（仍然有相同的错误“未捕获（承诺中）TypeError：data.forEach不是函数”）

标签： javascript json django

【解决方案1】：

就像 Kryten 在 cmets 中所说的那样，你有一个错字。所以我认为 .forEach 应该可以工作。

data.forEach((el) => {
    console.log(el);
    // or
    console.log(el.model);
    console.log(el.fields);
    ...
});

你也可以这样做：

for (const el of data) {
    console.log(el.fields);
    ...
}

【讨论】：

谢谢。使用 forEach（而不是 ForEach，哎呀！）仍然返回相同的错误 - 即使我完全按照上面的摘录进行操作。我还尝试了您的第二个选项（for 循环），但它记录了 'undefined' 647 次 - 我没有数过，但我认为它记录了 json 中的每个单独的字符。