使用ajax和jquery显示来自多个json对象的数组

Question

我有多个类似下面的对象。我希望将来自所有多个json对象的mealReviews：[]数组显示到一个$('#mealDetails').html()中。

 {
"_id": {
    "$oid": "59ef162f7afc7636"
},
"mealIDa": "ACT",
"mealIDb": "TMNT2",
"title": "Teenage Mutant Ninja Turtles 2 The Secret of the Ooze",
"description": "The Teenage Mutant Ninja Turtles (Mark Caso, Michelan Sisti, Leif Tilden, Kenn Troum) again battle their archenemy, the rogue ninja Shredder (Francois Chau). Shredder attempts revenge by obtaining the same radioactive ooze that created the Turtles and unleashing two new monstrous mutants: Tokka, an oversized snapping turtle, and Rahzar, a fearsome wolf-like creature. When Shredder plans to use the remaining ooze on himself, the Turtles must harness their ninja fighting skills to stop him.",
"releaseDate": "March 22, 1991",
"language": "English",
"subtitle": false,
"srt": "Teenage Mutant Ninja Turtles II The Secret of the Ooze.srt",
"director": "Michael Pressman",
"actors": "Paige Turco \"April O'Neil\", Vanilla Ice, Michelan Sisti \"Michelangelo, Soho Man\", Robbie Rist \"Michelangelo\", Kevin Clash \"Splinter\"",
"studio": "Golden Harvest Company, New Line Cinema, Northshore Investments Ltd.",
"hrs": 1,
"mins": 28,
"ratings": "PG \u2013 Parents Cautioned",
"dateAdded": "2017-07-18T20:59:17.473Z",
"mealReviews": [
    {
        "username": "dwaynekshrn",
        "accountType": "cop",
        "subject": "Lucky Award Winners",
        "rating": "1",
        "review": "I really think this movies deserves an academy award",
        "reviewDate": "2017-07-25T23:29:53.371Z"
    },
    {
        "username": "dwaynekshrn",
        "accountType": "cop",
        "subject": "One on the shot clock",
        "rating": "1",
        "review": "He shoots, he scores!",
        "reviewDate": "2017-07-24T22:58:17.622Z"
    },
    {
        "username": "shaolinkyle",
        "accountType": "monk",
        "subject": "In da house",
        "rating": "1",
        "review": "Shaolin Kyle is in the house!",
        "reviewDate": "2017-07-24T22:47:56.056Z"
    },
    {
        "username": "dwaynekshrn",
        "accountType": "cop",
        "subject": "Political Spectrum",
        "rating": "1",
        "review": "is dope son!",
        "reviewDate": "2017-07-24T22:51:51.106Z"
    }
   ]
}

我正在从ajax请求中检索数据，但是当我用console.log检查它时，它似乎没有返回数据。当我以一个特定的对象为目标时，它是有效的，但是当我试图从所有对象中获取相同的数据时，我绘制了一个空白。

$.ajax({
  url: url,
  type: 'GET',
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data){
  $('#mealDetails').empty();
  // test to see if retrieving data
  console.log(data.title);
  var reviews = [];
  var output = '<div>';
  $.each(data.mealReviews, function(key, value) {
    output += '<div class="row">';
    output += '<div class="col-sm-3 col-sm-offset-1 col-md-3 col-md-
    offset-1"><img class="img-thumbnail" src="images/' + 
     this.accountType +'.png" width="200" height="200" alt="">';
    output += '<p>By <a>'+ this.username +'</a> '+ this.reviewDate +'</p></div>';
    output += '<div class="col-sm-8 col-md-8"><div class="row">';
    output += '<h2>'+ this.rating +'<span class="glyphicon glyphicon-star"></span> '+ this.subject +'</h2>';
    output += '<p class="textFormat">'+ this.review +'</p></div></div>';
    output += '</div>';
  });

output += '</div>';
reviews.push(output);
$('#mealDetails').html(output);


},
error:function(xhr,status,err){
  console.log('nah bruh thats a no go');
}

  });

Answer 1

替换

使用value.accountType的this.accountType。

意味着您必须将$.each(....)中的所有this.替换为value.

Answer 2

下面是一个示例解决方案https://jsfiddle.net/j4r3dcxr/

​

var data1 ={
	"_id": {
		"$oid": "59ef162f7afc7636"
	},
	"mealIDa": "ACT",
	"mealIDb": "TMNT2",
	"title": "Teenage Mutant Ninja Turtles 2 The Secret of the Ooze",
	"description": "The Teenage Mutant Ninja Turtles (Mark Caso, Michelan Sisti, Leif Tilden, Kenn Troum) again battle their archenemy, the rogue ninja Shredder (Francois Chau). Shredder attempts revenge by obtaining the same radioactive ooze that created the Turtles and unleashing two new monstrous mutants: Tokka, an oversized snapping turtle, and Rahzar, a fearsome wolf-like creature. When Shredder plans to use the remaining ooze on himself, the Turtles must harness their ninja fighting skills to stop him.",
	"releaseDate": "March 22, 1991",
	"language": "English",
	"subtitle": false,
	"srt": "Teenage Mutant Ninja Turtles II The Secret of the Ooze.srt",
	"director": "Michael Pressman",
	"actors": "Paige Turco \"April O'Neil\", Vanilla Ice, Michelan Sisti \"Michelangelo, Soho Man\", Robbie Rist \"Michelangelo\", Kevin Clash \"Splinter\"",
	"studio": "Golden Harvest Company, New Line Cinema, Northshore Investments Ltd.",
	"hrs": 1,
	"mins": 28,
	"ratings": "PG \u2013 Parents Cautioned",
	"dateAdded": "2017-07-18T20:59:17.473Z",
	"mealReviews": [{
			"username": "dwaynekshrn",
			"accountType": "cop",
			"subject": "Lucky Award Winners",
			"rating": "1",
			"review": "I really think this movies deserves an academy award",
			"reviewDate": "2017-07-25T23:29:53.371Z"
		},
		{
			"username": "dwaynekshrn",
			"accountType": "cop",
			"subject": "One on the shot clock",
			"rating": "1",
			"review": "He shoots, he scores!",
			"reviewDate": "2017-07-24T22:58:17.622Z"
		},
		{
			"username": "shaolinkyle",
			"accountType": "monk",
			"subject": "In da house",
			"rating": "1",
			"review": "Shaolin Kyle is in the house!",
			"reviewDate": "2017-07-24T22:47:56.056Z"
		},
		{
			"username": "dwaynekshrn",
			"accountType": "cop",
			"subject": "Political Spectrum",
			"rating": "1",
			"review": "is dope son!",
			"reviewDate": "2017-07-24T22:51:51.106Z"
		}
	]
};

var data2 ={
	"_id": {
		"$oid": "59ef162f7afc7636"
	},
	"mealIDa": "ACT",
	"mealIDb": "TMNT2",
	"title": "Teenage Mutant Ninja Turtles 2 The Secret of the Ooze",
	"description": "The Teenage Mutant Ninja Turtles (Mark Caso, Michelan Sisti, Leif Tilden, Kenn Troum) again battle their archenemy, the rogue ninja Shredder (Francois Chau). Shredder attempts revenge by obtaining the same radioactive ooze that created the Turtles and unleashing two new monstrous mutants: Tokka, an oversized snapping turtle, and Rahzar, a fearsome wolf-like creature. When Shredder plans to use the remaining ooze on himself, the Turtles must harness their ninja fighting skills to stop him.",
	"releaseDate": "March 22, 1991",
	"language": "English",
	"subtitle": false,
	"srt": "Teenage Mutant Ninja Turtles II The Secret of the Ooze.srt",
	"director": "Michael Pressman",
	"actors": "Paige Turco \"April O'Neil\", Vanilla Ice, Michelan Sisti \"Michelangelo, Soho Man\", Robbie Rist \"Michelangelo\", Kevin Clash \"Splinter\"",
	"studio": "Golden Harvest Company, New Line Cinema, Northshore Investments Ltd.",
	"hrs": 1,
	"mins": 28,
	"ratings": "PG \u2013 Parents Cautioned",
	"dateAdded": "2017-07-18T20:59:17.473Z",
	"mealReviews": [{
			"username": "dwaynekshrn",
			"accountType": "cop",
			"subject": "Lucky Award Winners",
			"rating": "1",
			"review": "I really think this movies deserves an academy award",
			"reviewDate": "2017-07-25T23:29:53.371Z"
		},
		{
			"username": "dwaynekshrn",
			"accountType": "cop",
			"subject": "One on the shot clock",
			"rating": "1",
			"review": "He shoots, he scores!",
			"reviewDate": "2017-07-24T22:58:17.622Z"
		},
		{
			"username": "shaolinkyle",
			"accountType": "monk",
			"subject": "In da house",
			"rating": "1",
			"review": "Shaolin Kyle is in the house!",
			"reviewDate": "2017-07-24T22:47:56.056Z"
		},
		{
			"username": "dwaynekshrn",
			"accountType": "cop",
			"subject": "Political Spectrum",
			"rating": "1",
			"review": "is dope son!",
			"reviewDate": "2017-07-24T22:51:51.106Z"
		}
	]
};

getData = function(data){
	var reviews = [];
  var output = '<div>';
  $.each(data.mealReviews, function(key, value) {
    output += '<div class="row">';
    output += '<div class="col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1"><img class="img-thumbnail" src="images/' + 
     data.mealReviews[key].accountType +'.png" width="200" height="200" alt="">';
    output += '<p>By <a>'+ this.username +'</a> '+ data.mealReviews[key].reviewDate +'</p></div>';
    output += '<div class="col-sm-8 col-md-8"><div class="row">';
    output += '<h2>'+ this.rating +'<span class="glyphicon glyphicon-star"></span> '+ data.mealReviews[key].subject +'</h2>';
    output += '<p class="textFormat">'+ data.mealReviews[key].review +'</p></div></div>';
    output += '</div>';
  });

  output += '</div>';
  reviews.push(output);
  $('body').append(output);
}

getData(data1);
getData(data2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

我不确定你是不是在找这个...我没有调用AJAX，而是将数据保存在两个不同的变量中，并将这些数据传递给一个函数(无论您的AJAX成功方法中有什么)。

我使用.append()来追加数据，而不是对体或特定容器(id/ .html )进行类。

Answer 3

每个方法都使用匿名方法进行循环，因此this在上下文中丢失了您在这里的实际意图。您应该在$.each循环中使用值参数来引用正在迭代的项。

var reviews = [];
var output = '<div>';
$.each( data.mealReviews, function( key, value ) {
output += '<div class="row">';
output += '<div class="col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1"><img class="img-thumbnail" src="images/' + 
 value.accountType +'.png" width="200" height="200" alt="">';
output += '<p>By <a>'+ value.username +'</a> '+ value.reviewDate +'</p></div>';
output += '<div class="col-sm-8 col-md-8"><div class="row">';
output += '<h2>'+ value.rating +'<span class="glyphicon glyphicon-star"></span> '+ value.subject +'</h2>';
output += '<p class="textFormat">'+ value.review +'</p></div></div>';
output += '</div>';
});

output += '</div>';
reviews.push(output);
$( '#mealDetails' ).html( output );

小提琴：https://jsfiddle.net/8bc3hdqp/

编辑：如果你的意思是你的返回实际上有一个像你所显示的那样的多个对象的数组，那么你可以循环这些对象，然后循环内容：

var reviews = [];
var output = '<div>';
$.each( data, function( k, v ) {
    $.each( data[k].mealReviews, function( key, value ) {
        output += '<div class="row">';
        output += '<div class="col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1"><img class="img-thumbnail" src="images/' + value.accountType +'.png" width="200" height="200" alt="">';
        output += '<p>By <a>'+ value.username +'</a> '+ value.reviewDate +'</p></div>';
        output += '<div class="col-sm-8 col-md-8"><div class="row">';
        output += '<h2>'+ value.rating +'<span class="glyphicon glyphicon-star"></span> '+ value.subject +'</h2>';
        output += '<p class="textFormat">'+ value.review +'</p></div></div>';
        output += '</div>';
    });
});

output += '</div>';
reviews.push(output);
$( '#mealDetails' ).html( output );

小提琴：https://jsfiddle.net/8bc3hdqp/1/

您可以尝试通过使用console.log( JSON.stringify( data ) )将对象转换为字符串来对对象进行控制台日志记录；如果这有助于为您调试内容(不确定您所说的在响应中看不到任何内容是什么意思)。