如何将数据从 json 文件加载到引导网格答案

【问题标题】：How to load data from json file to bootstrap grid如何将数据从 json 文件加载到引导网格
【发布时间】：2020-05-04 12:24:27
【问题描述】：

我正在做我的第一个拼贴项目（简单的电子商务平台）。

我已经尝试过类似的解决方案：

https://stackoverflow.com/questions/37814493/how-to-load-json-data-into-bootstrap-table

它工作得很好，但不是但不能令人满意。我的目标是创建具有多行和 6 列的漂亮数组（加载表单 json），如下所示：

Image with pure html result

有什么办法吗？

product_list.json：

"products": [
    {
      "id": "1",
      "name": "Book Name 1",
      "category": "Computers",
      "price": "$ 123",
      "image": "img/product-1.png"
    }, {
      "id": "2",
      "name": "Book Name 2",
      "category": ["Science", "Programming"],
      "price": "$ 319",
      "image": "img/product-2.png"
    }
]

HTML：

<div class="container">
    <div class="title-box-featured">
        <h2>Product List</h2>
    </div>
    <div class="row">
        <div class="col-md-2">
            <a href="" target="blank">Image</a>
            <div class="product-bottom text-center">
                <h3>Name</h3>
                <h4>Price</h4>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你试过用表getbootstrap.com/docs/4.4/content/tables
好的，谢谢。不幸的是，我在排列方面遇到的最大问题是，只要我可以用 CSS 对整个表格进行样式化，我就无法改变加载数据的方式。使用这些方法，我可以在行下创建产品列表（一行中的一个产品），但我未能在一行中创建 6 个产品（如附图所示）。可能解决方案很简单，但我想不通。

标签： javascript html jquery bootstrap-4

【解决方案1】：

如果您想从 JSON 文件中检索数据，那么您可以为此使用 'jQuery.getJSON()'。您可以简单地编写此调用：

$.getJSON('result.json', function(data) {
     //here data is your retrived json obj, do further processing with it like i have done below
});

最好从外部 JSON 文件中获取数据，否则你可以这样做：

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script>
    $(document).ready(function() {
      var products = [{
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "1",
          "name": "Book Name 1",
          "category": "Computers",
          "price": "$ 123",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "2",
          "name": "Book Name 2",
          "category": ["Science", "Programming"],
          "price": "$ 319",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "2",
          "name": "Book Name 2",
          "category": ["Science", "Programming"],
          "price": "$ 319",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        },
        {
          "id": "2",
          "name": "Book Name 2",
          "category": ["Science", "Programming"],
          "price": "$ 319",
          "image": "https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
        }
      ];

      var j = 0;
      var content = "";
      for (var i in products) {
        if (i % 6 === 0) {
          $("#products").append("<tr id='row" + i + "'></tr>");
          j = i;
        }
        $("#row" + j).append("<td><div><img src='" + products[i].image + "' style='width:130px;height:200px;'></div><div class='text-center'>" + products[i].name + " </br><div>" + products[i].price + "</div></div></td>");
      }
    });
  </script>
</head>

<body>
  <table class="table">
    <tbody id="products"></tbody>
  </table>
</body>

</html>

这里您不需要手动添加行，只需向您的 JSON obj 添加更多数据，行将自动添加

我这里没有添加任何CSS样式，请根据您的需要添加，希望对您有所帮助。

【讨论】：

非常感谢！看起来它就像我试图做的那样工作！谢谢！

【解决方案2】：

如果您了解一点 javascript，您可以尝试加载数据并使用 Array.map 函数和计数器。一旦计数器达到 6，您就插入一个新行。

let products= [
    {
      "id": "1",
      "name": "Book Name 1",
      "category": "Computers",
      "price": "$ 123",
      "image": "img/product-1.png"
    }, {
      "id": "2",
      "name": "Book Name 2",
      "category": ["Science", "Programming"],
      "price": "$ 319",
      "image": "img/product-2.png"
    }
];

然后在你的页面内：

<div class="container">
    <div class="row">
        <script>
            var counter = 0; 
            propducts.map(product=>{ 
                counter = counter +1;
                if(counter < 6)
                return (<div class="col">{product /*do somthing with your data to style it*/}</div>);
                else
                    {
                        counter = 0;
                        return (<div class="col">{product /*do somthing with your data to style it*/}</div></div><div class="row">);
                    }
            };
        </script>
    </div>
</div>

【讨论】：