Jquery 每个循环不显示 JSON 项目的属性答案

【问题标题】：Jquery each loop doesn't display JSON item's propertiesJquery 每个循环不显示 JSON 项目的属性
【发布时间】：2020-07-01 13:57:34
【问题描述】：

Edited2：这是一个物体的样子。所有对象的所有字段均已填充。

已编辑：所以问题似乎是每个循环。我 console.logged 数据并以数组样式显示它。但由于某种原因，当我尝试打印对象的年龄 f.ex. 时，它显示为未定义。

我正在做一个小脚本来显示来自带有 jquery 和 ajax 的 json 文件的信息。我让 ajax 部分工作（我认为），但我无法让我的函数打印 JSON 对象数据。

所以我试图用 Jquery 显示 JSON 对象，但它什么也没做。 ready 函数打印出 done 并完成。

$(document).ready(function(){
    $.ajax({
        url: "file.json",
        cache: false
    }).done(function(data) {
        console.log("done");
        showData(data);        
    }).fail(function() {
        console.log("error");
    }).always(function() {
        console.log("complete");
    });
});

function showData(data) {   
 $.each(data.cats, function(index, kitty) {         
        var div = $("<div></div>");
        div.addClass("catContainer");        
        
        var image = $("<img></img>");
        image.addClass("catImage");
        image.src="kitty.image";
        
        var header = $("<p></p>").text(kitty.color);
        header.addClass("header");

        var age = $("<p></p>").text(kitty.age);
        var text = $("<p></p>").text(kitty.text);
        text.addClass("text");        
        var price = $("<p></p>").text(kitty.price);        
        div.append(image,header,size,text,price);
        $("div#cats").append(div);
    });       
}

我也尝试过这个循环，但它会将“未定义”打印到 div：

$(data).each(function(i, kitty) {
        $('#cats').append(kitty.price);

//对不起，我是菜鸟。希望这篇文章是按照说明进行的。

【问题讨论】：

您的数据是什么样的？您收到任何错误消息吗？
您可能需要 JSON.parse() 数据（jQuery 不会为您这样做）并且您可能需要检查 $.each 是否正确迭代。
首先在showData() 函数中执行console.log(data)。也在这里分享
使用$.getJSON而不是$.ajax，您不必担心自己解析响应。
@HamzaRashid 它以数组的方式显示所有数据。所以数据就在那里。循环是我认为的问题？

标签： javascript jquery json ajax

【解决方案1】：

您的image.src 有一个问题。当您将其设置为"kitty.image" 时，这实际上会分配该字符串。所以而不是：

image.src = "kitty.image",

用途：

image.attr("src", kitty.image);

或者：

image[0].src = kitty.image

这里的后者，因为image 是一个jQuery 对象，所以不会有src 作为索引。所以我们可以调用image[0] 来获取HTML 元素，然后我们可以分配src。

考虑以下内容。

$(function() {
  function showData(d, o) {
    $.each(d, function(index, kitty) {
      console.log("Adding Kitty", kitty);
      var div = $("<div>", {
        class: "catContainer"
      }).appendTo(o);

      $("<img>", {
        class: "catImage",
        src: kitty.image
      }).appendTo(div);

      $("<p>", {
        class: "header"
      }).html(kitty.color).appendTo(div);

      $("<p>").html(kitty.age).appendTo(div);
      $("<p>", {
        class: "text"
      }).html(kitty.text).appendTo(div);
      $("<p>").html(kitty.price).appendTo(div);
    });
  }

  $.ajax({
    url: "file.json",
    cache: false,
    success: function(data) {
      showData(data.cats, "#cats");
      console.log("Success");
    },
    error: function(x, e, n) {
      console.log("Error", x, e, n);
    }
  });
});

根据您的帖子，data 是一个对象。 data.cats 是一个对象数组。所以我们将使用data.cats 使用$.each() 迭代数组。我还传入了目标对象 ID。 .appendTo() 接受几个项目：

选择器、元素、HTML 字符串、元素数组或 jQuery 对象；匹配的元素集将插入到此参数指定的元素的末尾。

查看更多：https://api.jquery.com/appendto/

然后只需创建每个元素。使用$("<div>")，jQuery 将为我们处理包装元素。我们也可以传入一个带有属性的对象，比如类。我们可以链接到作为结果的 jQuery 对象，并建议使用 .html() 与 .text()，但两者都没有错。

【讨论】：