主页 / 问题 / 1240041
Accepted
Elizaveta
Asked:2022-02-05 00:03:30 +0000 UTC2022-02-05 00:03:30 +0000 UTC

从 $.getJson 输出到页面

  • 772

我搞砸了 - 我想这样做：

在此处输入图像描述

结果是这样的：

在此处输入图像描述

我从服务器获取 JSON：

在此处输入图像描述

我正在尝试将其添加到页面中，如下所示：

function loadCatalog(){
        $.getJSON("/update", function (data) {
            console.log(data);

            for (let i = 0; i < data.categories.length; i++) {
                let div = $("<div></div>").addClass("alert alert-info text-center");
                div.append($("<h3></h3>").text(data.categories[i].title));

                div.append('<table class="table"><thead><tr>');
                div.append('<th scope="col">Id</th>');
                div.append('<th scope="col">Name</th>');
                div.append('<th scope="col">Price (in cents)</th>');
                div.append('<th scope="col">Rate</th>');
                div.append('</tr></thead><tbody>');

                for (let j = 0; j < data.categories[i].products.length; j++) {
                    div.append('<tr><th scope="row">' + data.categories[i].products[j].id + '</th>');
                    div.append('<td>' + data.categories[i].products[j].name + '</td>');
                    div.append('<td>' + data.categories[i].products[j].priceInCents + '</td>');
                    div.append('<td>' + data.categories[i].products[j].rate + '</td></tr>');
                }

                div.append('</tbody></table>');

                $("#catalog").append(div).append('<br>');
            }
        });
    }

我在做什么错？（我在这件事上完全是绿色的

JSON：

{
  "categories": [
    {
      "id": 1,
      "title": "Clothes category",
      "products": [
        {
          "id": 1,
          "name": "Sweater",
          "priceInCents": 65458,
          "rate": 45
        },
        {
          "id": 2,
          "name": "Jacket",
          "priceInCents": 11111,
          "rate": 89
        },
        {
          "id": 3,
          "name": "Coat",
          "priceInCents": 9999,
          "rate": 36
        },
        {
          "id": 4,
          "name": "Vest",
          "priceInCents": 1200,
          "rate": 68
        },
        {
          "id": 5,
          "name": "Shorts",
          "priceInCents": 45000,
          "rate": 90
        },
        {
          "id": 6,
          "name": "Casual dress",
          "priceInCents": 36500,
          "rate": 79
        }
      ]
    },
    {
      "id": 2,
      "title": "Food category",
      "products": [
        {
          "id": 7,
          "name": "Meet",
          "priceInCents": 2132,
          "rate": 100
        },
        {
          "id": 8,
          "name": "Cookies",
          "priceInCents": 1111,
          "rate": 90
        },
        {
          "id": 9,
          "name": "Bread",
          "priceInCents": 777,
          "rate": 85
        },
        {
          "id": 10,
          "name": "Apples",
          "priceInCents": 454,
          "rate": 32
        },
        {
          "id": 11,
          "name": "Ice cream",
          "priceInCents": 873,
          "rate": 79
        }
      ]
    },
    {
      "id": 3,
      "title": "Toys category",
      "products": [
        {
          "id": 13,
          "name": "Barbie",
          "priceInCents": 12345,
          "rate": 80
        },
        {
          "id": 14,
          "name": "Cycle",
          "priceInCents": 65432,
          "rate": 90
        },
        {
          "id": 15,
          "name": "Lorry",
          "priceInCents": 10000,
          "rate": 55
        },
        {
          "id": 16,
          "name": "Little hare",
          "priceInCents": 6400,
          "rate": 97
        },
        {
          "id": 17,
          "name": "Bricks",
          "priceInCents": 1500,
          "rate": 100
        },
        {
          "id": 18,
          "name": "Rocking horse",
          "priceInCents": 10999,
          "rate": 10
        }
      ]
    }
  ]
}
javascript

2 个回答

  1. 问题已解决。相反.append()，我只是添加了带有加号的行，例如

    let content += '<table class="table"><thead><tr>' + 
                '<th scope="col">Id</th>'...
    • 1
  2. Best Answer

    可能有点多余，但是这种方式有一些东西。

    您可能可以简化所有这些模板并稍微使用模板字符串。但现在，您可以：

    let getProductsTableHeadHtml = () => {
  return `
          <thead>
              <th scope="col">Id</th>
              <th scope="col">Name</th>
              <th scope="col">Price (in cents)</th>
              <th scope="col">Rate</th>
          </thead>`;
};

let getProductsTableBodyHtml = (products = []) => {
  let bodyHtml = '<tbody>';

  for (product of products) {
    bodyHtml += getProductRowHtml(product);
  }

  bodyHtml += '</tbody>';

  return bodyHtml;
};

let getProductsTable = (products = []) => {
  return `<table class="table">
          ${getProductsTableHeadHtml()}
          ${getProductsTableBodyHtml(products)}
          </table>`;
};

let getProductRowHtml = (product) => {
  return `
          <tr scope="row">
              <td>${product.id}</td>
              <td>${product.name}</td>
              <td>${product.priceInCents}</td>
              <td>${product.rate}</td>
          </tr>`;
};

let getCategoryHtml = (data) => {
  let categoryHtml = '';

  for (let category of data.categories) {
    categoryHtml += `
          <div class="alert alert-info text-center">
              <h3>${category.title}</h3>
              ${getProductsTable(category.products)}
          </div>`;
  }

  return categoryHtml;
};

//------------------------------

var data = {
  "categories": [{
      "id": 1,
      "title": "Clothes category",
      "products": [{
          "id": 1,
          "name": "Sweater",
          "priceInCents": 65458,
          "rate": 45
        },
        {
          "id": 2,
          "name": "Jacket",
          "priceInCents": 11111,
          "rate": 89
        },
        {
          "id": 3,
          "name": "Coat",
          "priceInCents": 9999,
          "rate": 36
        },
        {
          "id": 4,
          "name": "Vest",
          "priceInCents": 1200,
          "rate": 68
        },
        {
          "id": 5,
          "name": "Shorts",
          "priceInCents": 45000,
          "rate": 90
        },
        {
          "id": 6,
          "name": "Casual dress",
          "priceInCents": 36500,
          "rate": 79
        }
      ]
    },
    {
      "id": 2,
      "title": "Food category",
      "products": [{
          "id": 7,
          "name": "Meet",
          "priceInCents": 2132,
          "rate": 100
        },
        {
          "id": 8,
          "name": "Cookies",
          "priceInCents": 1111,
          "rate": 90
        },
        {
          "id": 9,
          "name": "Bread",
          "priceInCents": 777,
          "rate": 85
        },
        {
          "id": 10,
          "name": "Apples",
          "priceInCents": 454,
          "rate": 32
        },
        {
          "id": 11,
          "name": "Ice cream",
          "priceInCents": 873,
          "rate": 79
        }
      ]
    },
    {
      "id": 3,
      "title": "Toys category",
      "products": [{
          "id": 13,
          "name": "Barbie",
          "priceInCents": 12345,
          "rate": 80
        },
        {
          "id": 14,
          "name": "Cycle",
          "priceInCents": 65432,
          "rate": 90
        },
        {
          "id": 15,
          "name": "Lorry",
          "priceInCents": 10000,
          "rate": 55
        },
        {
          "id": 16,
          "name": "Little hare",
          "priceInCents": 6400,
          "rate": 97
        },
        {
          "id": 17,
          "name": "Bricks",
          "priceInCents": 1500,
          "rate": 100
        },
        {
          "id": 18,
          "name": "Rocking horse",
          "priceInCents": 10999,
          "rate": 10
        }
      ]
    }
  ]
};


$("#catalog").html(getCategoryHtml(data));
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="catalog"></div>

    • 1

相关问题