Мое приложение отправляет мне JSON.Как мне взять этот JSON и вставить HTML на страницу?

Question

С $.ajax я получаю JSON-ответ:

[{"project":{"name":"P1111", description":"I like chicken soup","active":true}} .....repeats several times]

Что я хотел бы сделать с jQuery, так это взять ответ JSON и выполнить цикл по нему, чтобы создать следующее на id=target

<ul id="target">
  <li>P1111 - I like chicken soup - active</li>
  <li>3311 - I like green soup - active</li>
  <li>4324234 - I like orange soup - active</li>
  <li>123123 - I like hands - active</li>
</ul>

Мой JSON-ответ от сервера:

[{"project":{"name":"3rd project  XXXX","created_at":"2010-09-21T05:00:28Z","updated_at":"2010-09-21T05:00:28Z","site_id":1,"creator":1,"id":3,"description":"I eat chicken","active":true}},{"project":{"name":"It's 10:11pm2","created_at":"2010-09-21T05:11:25Z","updated_at":"2010-09-21T05:22:07Z","site_id":1,"creator":1,"id":7,"description":"It's 10:11pmIt's 10:11pm22","active":true}},{"project":{"name":"My first project","created_at":"2010-09-21T04:15:54Z","updated_at":"2010-09-21T04:15:54Z","site_id":1,"creator":1,"id":1,"description":"Wowwww","active":true}},{"project":{"name":"What a great project","created_at":"2010-09-21T04:16:07Z","updated_at":"2010-09-21T04:58:24Z","site_id":1,"creator":1,"id":2,"description":"Updated Description2","active":true}},{"project":{"name":"the big 6","created_at":"2010-09-21T05:08:22Z","updated_at":"2010-09-21T05:08:22Z","site_id":1,"creator":1,"id":6,"description":"the big 6the big 6","active":true}}]

Answer 1

Использование $ .ajax

$.ajax({
 url: url,
 dataType: 'json',
 success: function(data) {
    $.each(data, function(i,item){
      $('#target').add('<li>' + item.project.name + '</li>');
    });
 }

});

Я предлагаю использовать $.getJSON, поскольку ваш код будет короче, что сделает передачу меньше клиенту.

Вот примерное представление о том, как это сделать. Существует множество способов присоединения li к списку.

Answer 2

Попробуйте это

  $.ajax({
    ...
    success: function(data) {
      var lis = $.map(data, function(elem, i) {
         var project = elem['project'];
         return '<li>' + project['name'] + ' - ' + project['description'] + ' - ' +
                (project['active'] ? 'true' : 'false') + '</li>';
      });
      $('#target').append(lis.join('\n'));
    }
  });

Answer 3

Просто зациклите каждый элемент, используя getJSON:

$.getJSON(url, function(data){
    $.each(data, function(i, item){
        var text = item.project.name + ' - ' 
                 + item.project.description + ' - ' 
                 + (item.project.active ? 'active' : 'inactive');
        $('li').html(text).appendTo($('#target'));
    });
});

Answer 4

$.each(data.project, function(i, item) {
     $('#target').append('<li>'+item.name+' - '+item.description+' - '+item.active+'</li>');
});

Answer 5

Проверьте jQuery.each , который является своего рода оператором foreach.При этом вы можете перебирать свой объект JSON (любой объект JSON на самом деле является просто чистой переменной JavaScript, а в вашем случае это массив объектов).

Answer 6

Мне всегда нравится использовать прямой Javascript и помещать его в HTML-документ:

document.writeln("<ul id='target'>");
for (project in projects ) {
  var active = (project.active) ? "active" : "NOT active";
  document.writeln('<li>'+project.name+' - '+
                          project.description+' - '+active+'</li>');
}
document.writeln("</ul>");

Или поместите все это в строку var, а затем запишите это в div:

var htmlStr = "<ul id='target'>";
for (project in projects) {
  var active = (project.active) ? "active" : "NOT active";
  htmlStr += "<li>"+project.name+" - "+project.description+" - "+active+"</li>";
}
htmlStr += "</ul>";
document.getElementById("divTarget").html = htmlStr;

Answer 7

Я сделал это, чтобы заполнить выбор (идентификатор «расписание»), это почти тот же сценарий, что и у вас.

$. GetJSON ("../ schedule /" + id, функция (данные) { $ .each (данные, функция (индекс, значение) { $ (""). attr ("value", value.id) .html (value.name) .appendTo ("# schedule"); }); });

Answer 8

Попробуйте:

var json = [ {"project":{"name":"P1111", "description":"I like chicken soup","active":true}},
                {"project":{"name":"P2222", "description":"I like chicken soup","active":true}} ];
var html = ['<ul id="target">'];
$.each( json, function(i, p) {
        var a = p.project.active ? "active" : "not active";
        html.push("<li>" + p.project.name + " - " + p.project.description + " - " + a + "</li>");
});
$("body").append(html.join(""));

Answer 9

var _li="";
jQuery.ajax({
 url:'ur_url',
 type:'Get', //or post or jsonp as per need
 success:function(data)
   {
    jQuery.each(data,function(i,item){
       _li=_li+"<li>"+item.project.name +"  -  " +item.project.description +"  -  " +item.project.active+"</li>";
                                   });
   jQuery('#target').html(_li);
   } 
})