How to load data from json file to bootstrap grid

Question

I am working on my first collage project (simple ecommerce platform).

I have already tried solutions like:

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

It works perfectly but not but not satisfactorily. My goal is to create nice array (loaded form json) with multiple rows and 6 columns, looking like this:

Image with pure html result

is there any way to do that?

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>

have you tried using tables https://getbootstrap.com/docs/4.4/content/tables/ — jayaram S, May 04 '20 at 13:10
Yes, thank you. Unfortunately, the biggest problem I have there with the arrangement, as long as I can stylize with CSS the whole table, I can't change the way of loading data. With these methods I can create lists of products row below row (one product in one row), but I failed to create 6 products in one row (as in the attached photo). It is possible that the solution is simple, but I can't figure it out. — Elijah, May 04 '20 at 13:36

score 0 · Answer 1 · answered May 04 '20 at 15:24

If you know a litte javascript you can try to lad the data and use the Array.map function and a counter. Once the counter reaches 6 you insert a new row.

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"
    }
];

Then inside your page:

<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>

score 0 · Accepted Answer · edited May 07 '20 at 20:39

If you want to retrieve data from the JSON file then you can use 'jQuery.getJSON()' for this. You can simply write this call like:

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

It's better to get data from an external JSON file, otherwise you can do it like:

<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>

Here you don't need to add rows manually just add more data to your JSON obj and row will be added automatically

I have not added any CSS styles here so add according to your need, I hope this can help.

Thanks a lot! looks like it works like I tried to do! thanks! — Elijah, May 05 '20 at 11:48

How to load data from json file to bootstrap grid

2 Answers2