Как я могу получить данные из объекта массива JSON с помощью JQUERY?

Question

Как я могу получить все данные из объектов массива 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>

javascript jquery json

1

ajprs28 27 Авг 2017 в 15:46

Answer 1

Итак, во-первых, вам не нужно писать это:

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

        }
    });
});

4

Ricky Levi 27 Авг 2017 в 13:11

Answer 2

Если ваш вызов ajax успешен, тогда:

function (data): эти данные являются базовым объектом, возвращаемым с сервера, в вашем случае это не свойство data .
теперь данные в вашем json - это массив.

Поэтому вместо использования foreach для корневого объекта используйте его для data.data . надеюсь, это поможет.

0

Anupam Singh 27 Авг 2017 в 13:07

Answer 3

В вашей функции 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>');
    });
}

Надеюсь, это поможет.

2

lexith 27 Авг 2017 в 12:58

Answer 4

Вот вам пример решения 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 с данными ответа .

Надеюсь, что это поможет вам.

0

Shiladitya 27 Авг 2017 в 13:09

Как я могу получить данные из объекта массива JSON с помощью JQUERY?

4 ответа

Похожие вопросы

Новые вопросы

javascript