Как данными из json заполнить таблицу?

Question

[roma4ever2012]

Доброго времени суток!

{
  "response": {
    "type": "Заказ",
    "id": "1245",
    "items": [
      {
        "title": "Rear Window",
        "director": "Alfred Hitchcock",
        "year": 1954,
        "photo": {
          "1": "img1.jpg",
          "2": "img2.jpg",
          "3": "img3.jpg",
          "4": "img4.jpg"
        }
      },
      {
        "title": "Rear Window",
        "director": "Alfred Hitchcock",
        "year": 1954,
        "photo": {
          "1": "img5.jpg",
          "2": "img6.jpg",
          "3": "img7.jpg",
          "4": "img8.jpg"
        }
      }
    ]
  }
}

Имеется json в таком виде, подскажите как его распарсить чтобы заполнить такую таблицу данными из items

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Заголовок</th>
            <th>Директор</th>
            <th>Возвраст</th>
            <th>Изображения.</th>
        </tr>
    </thead>
</table>

Answer 1

[0xD34F]

Начать следует с получения из json'а массива:

const { items } = JSON.parse(json).response;

Дальше два пути.

Первый - собираем html:

const html = `
  <tbody>${items.map(n => `
    <tr>
      <td>${n.title}</td>
      <td>${n.director}</td>
      <td>${n.year}</td>
      <td>${Object.values(n.photo).map(m => `<img src="${m}">`).join('')}</td>
    </tr>`).join('')}
  </tbody>
`;

Который затем добавляем в таблицу:

$('#example').append(html);
// или
document.querySelector('#example').insertAdjacentHTML('beforeend', html);

Второй - создаём элементы напрямую:

items.forEach(function(n) {
  const tr = this.insertRow();
  tr.insertCell().textContent = n.title;
  tr.insertCell().textContent = n.director;
  tr.insertCell().textContent = n.year;
  tr.insertCell().append(...Object.values(n.photo).reduce((acc, m) => (
    (acc[acc.length] = new Image).src = m,
    acc
  ), []));
}, document.getElementById('example').createTBody());

Comments

[roma4ever2012]

$(document).ready(function() {
    var data = {
        status_change: this.value
    };
    $.ajax({
        url: '../json.php',
        type: "POST",
        data,
        dataType: "jsonp",
        success: function(response) {
            const json = JSON.parse(response);
            $('#example').append(
                `<tbody>${json.response.items(n =>
    `<tr>
      <td>${n.title}</td>
      <td>${n.director}</td>
      <td>${n.year}</td>
      <td>${Object.values(n.photo).map(n => `<img src="${n}">`).join('')}</td>
    </tr>`).join('')}
  </tbody>`
            );
        }
    });
});

Ничего не выводит

[0xD34F]

roma4ever2012, выводит.

"Ничего не выводит" - это разговор ни о чём, так что если вы ничего более выдавить из себя неспособны, думайте сами, где ошиблись с получением данных. Или на фриланс идите, там вам всё сделают. Только $ не забудьте приготовить.

[roma4ever2012]

0xD34F, ошибку понял, спасибо за помощь!

Answer 2

[PigData]

Рекомендую подключить библиотеку типа https://datatables.net/ и кроме загрузки из json получить дополнительные плюшки - сортировку, поиск и т.п.