Отобразить изображение и заголовок из json, но в сообщении говорится, что невозможно прочитать свойство 'изображение' из неопределенного

Question

<section id="panel">
  <div class="container">
  </div> 
</section>

{
  "list": [{
      "image": "cat.jpg",
      "name": "meow"
    }, {
      "image": "dog.jpg",
      "name": "woof"
    }, {
      "image": "sheep.jpg",
      "name": "baaa"
    }, {
      "image": "bird.jpg",
      "name": "chirp"
    }
  ]
} 

$(document).ready(function () {
  $.ajax({
    url: 'https-url',
    type: 'GET',
    dataType: 'json',

    success: function (data) {
      $.each(data.list, function (i, item) {
        $("#panel .container .col-sm-6").remove();

        var lastItems = data.list.slice(-2);
        var content = '<div class="col-sm-6">';

        content += '<img class="img-responsive" src="' + lastItems[i].image + '" alt="' + lastItems[i].name + '"/>';
        content += '<p>' + lastItems[i].name + '</p>';
        content += '</div></div>';

        $("#panel .container").append(content);
      });
    },
    error: function (data) {
      alert('failed');
    }
  });
});

Json будет длиннее, но независимо от длинного числа, я хотел взять последние 2 детали (изображения и имя), которые будут, например, «овцы» и «птицы». item.image и item.name, похоже, работают, но с последними 2 данными, попытались использовать lastItem[i].image (то же самое для имени) и получили сообщение об ошибке. Пожалуйста, помогите мне с некоторым руководством. Заранее спасибо.

Answer 1

Есть 2 проблемы с вашим кодом

1. Вы получаете в своем коде свойства cover и name, в то время как в вашем JSON есть image и name

2. В каждом цикле у вас будет индекс, превышающий размер списка, в котором вы ищете элементы (lastItems). В вашем примере переменная i может получить значение 3, когда последний индекс lastItems равно 1 (потому что размер равен 2). Итак, ваша функция успеха должна выглядеть так:

    var lastItems = data.list.slice(-2);
   
   //You remove the item (this is not necesary to put it into the each loop cause it will return one item (due to you are looking for the element that has that id), if you have more than one then you have to loop through and do something like $(this).remove();
   $("#panel .container .col-sm-6").remove();
   
   //You fill the last 2 items
   $.each(lastItems, function(i, item) {
   
   var content = '<div class="col-sm-6">';
   content += '<img class="img-responsive" src="' + lastItems[i].cover + '" alt="' + lastItems[i].name + '"/>';
   content += '<p>' + lastItems[i].name + '</p>';
   content += '</div></div>';
   $("#panel .container").append(content); //This will cause an error casue the element with the id #panel will no longer exist (it will be erased with the last remove() call
   });