Javascript Jquery每个循环不'；t显示JSON项'；s属性_Javascript_Jquery_Json_Ajax

Javascript Jquery每个循环不'；t显示JSON项'；s属性

javascript jquery json ajax

Javascript Jquery每个循环不'；t显示JSON项'；s属性,javascript,jquery,json,ajax,Javascript,Jquery,Json,Ajax,Edited2:这是一个物体的图片。将填充所有对象的所有字段。已编辑：因此问题似乎是每个循环的问题。I console.log记录数据，并以数组形式显示。但出于某种原因，当我试图打印对象的年龄f.ex时，它显示为未定义我正在使用jquery和ajax编写一个小脚本，用于显示json文件中的信息。我认为ajax部分可以正常工作，但我无法让我的函数打印JSON对象数据所以我试图用Jquery显示JSON对象，但它什么都不做。“就绪”功能打印“完成”和“完成” $(document).rea

Edited2:这是一个物体的图片。将填充所有对象的所有字段。

已编辑：因此问题似乎是每个循环的问题。I console.log记录数据，并以数组形式显示。但出于某种原因，当我试图打印对象的年龄f.ex时，它显示为未定义

我正在使用jquery和ajax编写一个小脚本，用于显示json文件中的信息。我认为ajax部分可以正常工作，但我无法让我的函数打印JSON对象数据

所以我试图用Jquery显示JSON对象，但它什么都不做。“就绪”功能打印“完成”和“完成”

$(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);
    });       
}

//对不起，我是诺布。希望这篇文章是按照说明写的。

一个问题是你的

image.src

。当您将其设置为

“kitty.image”

时，这将实际分配该字符串。因此，不是：

image.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);
    }
  });
});

$（函数（）{
函数showData（d，o）{
$.each（d，函数（索引，kitty）{
日志（“添加Kitty”，Kitty）；
var div=$（“”{
类别：“catContainer”
}).附录（o）；
$("", {
类别：“标题”
}).html（kitty.color）.appendTo（div）；
$（“”）.html（kitty.age）.appendTo（div）；
$（“”{
类别：“文本”
}).html（kitty.text）.appendTo（div）；
$（“”）.html（kitty.price）.appendTo（div）；
});
}
$.ajax({
url:“file.json”，
cache:false，
成功：功能（数据）{
showData（data.cats，“#cats”）；
控制台日志（“成功”）；
},
错误：函数（x，e，n）{
控制台日志（“错误”，x，e，n）；
}
});
});

根据您的帖子，

数据

是一个对象<代码>数据。cats是一个对象数组。因此，我们将使用

data.cats

使用

$.each（）

迭代数组。我还传入目标对象ID。

.appendTo（）

接受一些项目：

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

请参阅更多：

然后，只需创建每个元素。使用

$（“”）

，jQuery将为我们处理包装元素的问题。我们还可以传入具有属性的对象，如类。我们可以链接到作为结果的jQuery对象，并建议使用

.html（）

而不是

.text（）

，但这两种方法都没有错。

一个问题是您的

图像.src

有问题。当您将其设置为

“kitty.image”