Как обрабатывать данные json через цикл .each в таблицу html

Я делаю запрос get ajax, который отображает данные json в таблице html. Я знаю, как это сделать с помощью javascript, поэтому я решил попробовать с jquery. В моем цикле .each есть проблема. Я смутно отношусь к тому, как аргументы (key, object) обрабатывают несколько пар значений в каждой позиции и подозревают, что это моя ошибка.Как обрабатывать данные json через цикл .each в таблицу html

Я пробовал JSON.parse, но это не помогло. Я определенно получаю данные, поскольку я могу отображать их в окне предупреждения. Я подозреваю, что то, что я делаю, не является отраслевым стандартом, и что есть более элегантный способ достичь моей цели.

$("#button").click(function(){  

        $.ajax({ 
        type: 'get', 
        url: "http://www.adweb.agency/interview/api/animals", 
        data: {format: 'json' }, 
        dataType: 'json', 
        success: function(data){ 

         var i = 0; 
         var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>'; 

           $.each(data, function(key, object){ 

              table += ('<tr>'); 
              table += ('<td>' + data.Title + '</td>'); 
              table += ('<td><img src="' + data.ImageURLs.Thumb + '"></td>'); 
              table += ('<td>' + data.Description + '</td>'); 
              table += ('</tr>'); 

              }); 

            table += '</table>'; 

            $('#tableContainer').html(table); 

           } 

         }); 

         });

источник

2016-06-30 Forgive me I' m a drummer.

Какая ошибка вы получаете? А также, если вы можете предоставить JSON, который вы получаете. – DCruz22

json исходит от http://www.adweb.agency/interview/api/animals. У меня нет сообщения об ошибке. –

вот правильный код, который вам нужен, просто скопируйте и вставьте, привет!

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<body> 

<input id = "btnSubmit" type="button" value="Release"/> 

<div id="tableContainer"> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#btnSubmit").click(function(){   

       $.ajax({ 
         dataType: 'json', 
         url: "http://www.adweb.agency/interview/api/animals", 
         type: 'get', 

         success: function (data) { 
         var i = 0; 
         var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>'; 
         data = $.parseJSON(data) 
           $.each(data, function (idx, obj) {         
            table += ('<tr>'); 
            table += ('<td>' + obj.Title + '</td>'); 
            table += ('<td><img src="' + obj.ImageURLs.Thumb + '"></td>'); 
            table += ('<td>' + obj.Description + '</td>'); 
            table += ('</tr>'); 
           }); 
         table += '</table>'; 
         $("#tableContainer").html(table); 

         }, 
         error: function(XMLHttpRequest, textStatus, errorThrown) { 
          alert("some error"); 
         } 
       }); 
    }); 
}); 




</script> 
</body> 

</html>

источник

2016-06-30 16:56:13

Попробуйте этот код:

$.each(data, function(key, object){ 

    table += '<tr>'; 
    table += '<td>' + data[key].Title + '</td>'; 
    table += '<td><img src="' + data[key].ImageURLs.Thumb + '"></td>'; 
    table += '<td>' + data[key].Description + '</td>'; 
    table += '</tr>'; 
});

источник

2016-06-30 16:14:55 DCruz22

Это не сработало. Сожалею. –

Я думаю, вам нужно будет дать более подробную информацию о том, что вы получаете – DCruz22

Я не получаю много. Когда я нажимаю кнопку, я получаю заголовок таблицы, но в таблице нет данных. –

Предполагая, что ваш ответ переменная «данные» является массивом, вы доступ к неправильному переменную внутри каждой итерации вашего каждого цикла:

$("#button").click(function(){  

    $.ajax({ 
     type: 'get', 
     url: "http://www.adweb.agency/interview/api/animals", 
     data: {format: 'json' }, 
     dataType: 'json', 
     success: function(data){ 

      var i = 0; 
      var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>'; 

      // NOTE! I changed 'object' to 'value' here 
      // NOTE 2! We added a JSON.parse on the 'data' variable to convert from JSON to JavaScript objects. 
      $.each(JSON.parse(data), function(key, value){ 

       // We need to access the value variable in this loop because 'data' is the original array that we were iterating! 
       table += ('<tr>'); 
       table += ('<td>' + value.Title + '</td>'); 
       table += ('<td><img src="' + value.ImageURLs.Thumb + '"></td>'); 
       table += ('<td>' + value.Description + '</td>'); 
       table += ('</tr>'); 

      }); 

      table += '</table>'; 

      $('#tableContainer').html(table); 

     } 

    }); 

});

См. Комментарии в приведенном выше коде для внесения изменений.

См. Документацию на .each() итератора jQuery. here.

источник

2016-06-30 16:18:54

Извините. Это не сработало. Это помогает мне понять это лучше. –

Проверьте новый код. Ваша первоначальная идея JSON.parse была правильной, но только с новыми измененными переменными в цикле .each(), которые я предоставил. Дайте новый код выстрелу. В будущем, когда вы запрашиваете помощь при анализе ответов через AJAX или тому подобное, рекомендуется опубликовать пример того, как выглядит ответ API. В этом случае я должен был сам сделать запрос, чтобы увидеть результат. –

Спасибо. Я здесь, чтобы учиться, и все советы были оценены. Я, как вы посоветуете, –

Как обрабатывать данные json через цикл .each в таблицу html

ответ

Смежные вопросы