Как загрузить массив Json в отдельные строки таблицы? - PullRequest
Новая
       3

Как загрузить массив Json в отдельные строки таблицы?

0 голосов
/ 28 мая 2020

У меня проблемы с отображением моих данных json правильно. Я хочу получить каждый продукт и поместить его в отдельную строку.

Проблема в том, что он помещает все данные, например, значения «имя» в одну строку таблицы, а не в несколько строк.

Это мои json данные 

{
 id: "FVFkkD7s8xNdDgh3zAyd",
 name: "AlperKaffe",
 products: [
 {
   id: "0cfBnXTijpJRu14DVfbI",
   name: "Første Kaffe",
   price: "1",
   size: "small",
   quantity: "20 ml"
},
{
   id: "JQadhkpn0AJd0NRnnWUF",
   name: "Anden Kaffe",
   price: "2",
   size: "Medium",
   quantity: "25 ml"
},
{
   id: "UwHHdH8bFxbVHkDryeGC",
   name: "kaffeeen",
   price: "300",
   size: "Small",
   quantity: "23 ml"
},
{
   id: "WiX5h0wFMNkCux9cINYq",
   name: "kaffe modal",
   price: "230",
   size: "Medium",
   quantity: "39 ml"
},

это мой Js файл, который получает json данные. Как видите, я сейчас работаю только со значением "name" 

  // Jquery getting our json order data from API
  $.get("http://localhost:8888/products", (data) => {    

    let rows = data.map(item => {

      let $clone = $('#frontpage_new_ordertable tfoot tr').clone();

      let productsName = item.products.map(prod => `${prod.name}`);
      $clone.find('.name').html(productsName);

      return $clone;
    });

    // appends to our frontpage html 
    $("#frontpage_new_ordertable tbody").append(rows);


    });

это мой html файл 

<body>  
   <table id="frontpage_new_ordertable">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Size</th>
        <th>Quantity</th>
        <th></th>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td class="name"></td>
        <td class="price"></td>
        <td class="size"></td>
        <td class="quantity"></td>
        <td class="buttons"></td>
      </tr>
    </tfoot>
  </table>

  <script src="./itemPage.js"></script>

</body>

Ответы [ 2 ]

1 голос
/ 28 мая 2020

необходимо заменить let rows = data.map(item => { на let rows = data.products.map(item => {

и 

      let productsName = item.products.map(prod => `${prod.name}`);

на 

      let productsName = item.name;

https://jsfiddle.net/ab7t1vmf/3/

0 голосов
/ 28 мая 2020

Проблема в вашем фрагменте JS, похоже, let rows = data.map(item => { ...

Из того, что вы описываете, данные JSON состоят из 3 ключей:

  • id
  • имя
  • продукты

Вы не можете выполнить функцию map непосредственно на объекте Javascript, для этой функции требуется массив.

Посмотрев немного подробнее на ваш код, я понимаю, что вам нужно отображать каждый продукт в отдельной строке. Таким образом, вам нужно будет использовать функцию map для data.products, которая содержит массив (продуктов). 

let rows = data.products.map(item => {
    // ...
    $clone.find('.name').html(item.name);
    // ...
// ...
});

Ссылка: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...