0
我使用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 += '<div class="row">';
} // 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 += '<div class="col-lg-4 col-md-6 col-sm-6 mb-col-' + remainder + '">';
output += '<div class="group-item-inner">';
output += '<h5 class="group-name">' + data.response.items.item.name + '</h5>';
output += '<p class="meeting-time">' + data.response.items.item.meet_day_name + '|' + data.response.items.item.meet_time_name + '</p>'
output += '<p class="service-id">' + data.response.items.item.area_name.attributes.service_id + '</p>'
output += '</div>';
output += '</div>';
if (x % 3 === 2) {
output += '</div>';
} // Wrap every row END
}
groups_search.innerHTML = output;
}
}
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AJAX Group Search</title>
</head>
<body data-groups="search">
<div id="groups">
<!-- Inject the parsed and formatted JSON data here -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- JS File using parsing API data -->
<script src="scripts.js"></script>
</body>
</html>