Как я могу получить все данные из объектов массива JSON с помощью jquery?
Я пробовал раньше, но мой код только может получить данные из объекта JSON.
Это мой json-файл student.json :
{"status":true,
"offset":0,
"limit":25,
"total":2,
"data":[
{ "id":231,
"title":"mytitle1",
"content":"myconten1",
"created_at":"2017-07-10 03:56:32",
"updated_at":"2017-07-10 03:56:32"
},{ "id":230,
"title":"mytitle2",
"content":"mycontent2",
"created_at":"2017-07-10 03:56:06",
"updated_at":"2017-07-10 03:56:06"
}]}
Мой сценарий JS:
<script>
$(document).ready(function(){
$(function (){
var $orders = $('#orders');
$.ajax({
type: 'GET',
url: 'json/student.json',
success: function(data) {
console.log('success', data);
$.each(data, function(i, dataentry){
$orders.append('<li>dataid: '+dataentry.id+'</li>');
});
}
});
});
});
</script>
4 ответа
Итак, во-первых, вам не нужно писать это:
$(document).ready(function(){
$(function (){
Потому что $(function()
(без пробела) является сокращением от $(document).ready(function()
.
Что касается вашей проблемы - я считаю, что data
- это весь JSON, поэтому вам нужно извлечь data.data
, поэтому я бы написал так:
$(function (){
var $orders = $('#orders');
$.ajax({
type: 'GET',
url: 'json/student.json',
success: function(response) { // <= this is the change
var data = response.data; // <= going inside the data itself
$.each(data, function(i, data){
$orders.append('<li>dataid: '+data.id+'</li>');
});
}
});
});
Если ваш вызов ajax успешен, тогда:
function (data): эти данные являются базовым объектом, возвращаемым с сервера, в вашем случае это не свойство data .
теперь данные в вашем json - это массив.
Поэтому вместо использования foreach для корневого объекта используйте его для data.data . надеюсь, это поможет.
В вашей функции success
полученный data
является фактическим ответом на данные вашего вызова ajax.
Вы должны увидеть это в своем выражении console.log
со всеми свойствами, такими как offset
, limit
, total
и т. Д.
В любом случае, вы пытаетесь перебрать весь объект, а не свойство data
внутри ответа, который на самом деле является массивом, который вы, вероятно, хотите перебрать. Вы не получите никаких ошибок, потому что $.each
может циклически проходить как по литералам объекта, так и по массивам.
Вот как это должно выглядеть (я изменил имена переменных, чтобы сделать их более понятными):
success: function(response) {
$.each(response.data, function(i, dataEntry){ // or response['data']
$orders.append('<li>dataid: '+dataEntry.id+'</li>');
});
}
Надеюсь, это поможет.
Вот вам пример решения https://jsfiddle.net/xydqLLdb/
var response = {"status":true,
"offset":0,
"limit":25,
"total":2,
"data":[
{ "id":231,
"title":"mytitle1",
"content":"myconten1",
"created_at":"2017-07-10 03:56:32",
"updated_at":"2017-07-10 03:56:32"
},{ "id":230,
"title":"mytitle2",
"content":"mycontent2",
"created_at":"2017-07-10 03:56:06",
"updated_at":"2017-07-10 03:56:06"
}]};
$.each(response.data, function(i, data){
$('ul').append('<li>dataid: ' + data.id + '</li>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
</ul>
На основе вашего сценария
$(document).ready(function(){
$(function (){
var $orders = $('#orders');
$.ajax({
type: 'GET',
url: 'json/student.json',
success: function(response) {
$.each(response.data, function(i, data){
$orders.append('<li>dataid: ' + data.id + '</li>');
});
}
});
});
});
Вам нужно пройтись по data
key
с данными ответа .
Надеюсь, что это поможет вам.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.