Как загрузить данные из файла json в сетку bootstrap - PullRequest
Новая
       28

Как загрузить данные из файла json в сетку bootstrap

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

Я работаю над своим первым проектом коллажа (простая платформа электронной коммерции).

Я уже пробовал такие решения, как: 

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

Это работает отлично, но не удовлетворительно, но не удовлетворительно. Моя цель - создать симпатичный массив (загруженная форма json) с несколькими строками и 6 столбцами, который выглядит следующим образом:

Изображение с чистым html результатом

Есть ли способ сделать это?

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>

Ответы [ 2 ]

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

Если вы хотите извлечь данные из файла JSON, вы можете использовать для этого 'jQuery .get JSON ()'. Вы можете просто написать этот вызов как: 

$.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 объект, и строка будет добавлена ​​автоматически

У меня нет здесь добавлены любые стили CSS, поэтому добавляйте в соответствии с вашими потребностями, надеюсь, это поможет.

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

Если вы знаете немного 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...