Блог

Я работаю с файлом JSON и извлекаю изображения. Когда я запускаю цикл, у меня каждый элемент отображается на странице в виде сетки фотографий. Но после этого я хочу знать, как я могу назначить URL-адрес каждой из этих фотографий. Мне нужно, чтобы каждый из них указывал на определенный URL страницы.

 (function() {
    'use strict';

    var url = 'path to json';

    $.getJSON(url, function(json) {

        var categoryImage = '';

        $.each(json, function (i, item) {
            if (item.itemCommodity == "10") {
                categoryImage  = '<div class="col-md-3 col-sm-6 col-xs-6">'   '<img class="img-responsive img-hover productImages" src="'   (item.imageURL)   '">'   '<h3 class="text-center">'   (item.itemName)   '</h3>'   '</div>';
            }
        });

        $('#categoryImages').html(categoryImage);
    });
})();  

 /* JSON Example */

[
   {
      "_id":"1",
      "itemName":"Tomatoes",
      "imageURL":"path to image",
      "itemCommodity":"10"
   },

   {
      "_id":"2",
      "itemName":"Olive Oil",
      "imageURL":"path to image",
      "itemCommodity":"20"
   }
]  

Вам следует быть осторожным с добавлением JSON-файлов в URL-адрес, поскольку get-запросы имеют ограничения по размеру, и JSON может стать действительно большим в зависимости от того, что вы туда добавляете.

Учитывая это, если у вас есть ваш json в переменной:

 var myJson = [
   {
      "_id":"1",
      "itemName":"Tomatoes",
      "imageURL":"path to image",
      "itemCommodity":"10"
   },

   {
      "_id":"2",
      "itemName":"Olive Oil",
      "imageURL":"path to image",
      "itemCommodity":"20"
   }
]
  

Вы можете преобразовать его в строку с помощью https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify и безопасно сохранить его в URL:

 var myJsonString = JSON.stringify(myJson);
window.location.hash = encodeURIComponent(myJsonString)
  

Разобрался с этим. Использовал оператор if, но также попытаюсь использовать оператор switch.

Я не совсем уверен, что вы имеете в виду под

Мне нужно, чтобы каждый из них указывал на определенный URL страницы.

Поскольку у ваших изображений уже есть URL-адрес (тот, что в вашем JSON), вам нужна привязка, чтобы при вводе определенного URL страница «автоматически перемещалась» к конкретному изображению?