ajax 循环html元素,AJAX返回API数据并使用jQuery循环遍历嵌套的JSON数据

我使用AJAX连接到返回JSON对象的API(请参阅下面的JSON代码参考)，并试图循环并解析要在HTML元素内部呈现的JSON数据。AJAX返回API数据并使用jQuery循环遍历嵌套的JSON数据

我的代码正在输出所有东西，除非它一直返回JSON数据为undefined。我只是有问题，实际上抓住JSON数据将其注入到我为每个JSON item元素创建的html元素中。

/* What the JSON object looks like being returned by the api */

/*

"request": {

"parameters": {

"argument": {

"@attributes": {

"value": "service_name",

"name": "sn"

}

}

}

},

"response": {

"service": "group_search",

"service_action": "execute",

"availability": "public",

"items": {

"@attributes": {

"count": "3"

},

"item": [{

"id": "100",

"name": "Item Nice Name",

"meet_day_name": "Wednesday",

"meet_time_name": "Noon",

"description": "Item description",

"area_name": {

"@attributes": {

"service_id": "0"

}

},

},

{

"id": "101",

"name": "Item Nice Name",

"meet_day_name": "Monday",

"meet_time_name": "Evening",

"description": "Item description",

"area_name": {

"@attributes": {

"service_id": "0"

}

},

},

{

"id": "102",

"name": "Item Nice Name",

"meet_day_name": "Friday",

"meet_time_name": "Morning",

"description": "Item description",

"area_name": {

"@attributes": {

"service_id": "0"

}

},

}

]

}

}

}

*/

if ($('body').data('groups') === 'search') {

$.ajax({

url: 'example.com/api.php',

type: 'GET',

success: function(data, textStatus) {

console.log('Get status: ' + textStatus);

console.log(data); // This is correctly dumping all json data to the console

var groups_search = document.getElementById('groups');

if (textStatus === 'success') {

var output = '',

remainder = '';

for (var x = 0; x < data.length; x++) {

/* This is being used to format HTML elements */

if (x % 3 === 0) {

remainder = '0';

} else if (x % 3 === 1) {

remainder = '1';

} else if (x % 3 === 2) {

remainder = '2';

}

if (x % 3 === 0) {

output += '

';

} // Wrap every row START

/* This is where I need help correctly parsing the API data.

* Note the below JSON data is just referencing the data

* I'm trying to output and is not how I was actually

* trying to render it.

*/

output += '

';

output += '

';

output += '

' + data.response.items.item.name + '

';

output += '

' + data.response.items.item.meet_day_name + '|' + data.response.items.item.meet_time_name + '

'

output += '

' + data.response.items.item.area_name.attributes.service_id + '

'

output += '

';

output += '

';

if (x % 3 === 2) {

output += '

';

} // Wrap every row END

}

groups_search.innerHTML = output;

}

}

});

AJAX Group Search

2017-07-15

corey