CODEWITHSUNDEEP
jqueryjson
Tom
Tom

Reputation: 345

Unsure how to assign JSON object to a url

I am working with a JSON file and I am pulling in images. When i run the loop im having each item display on the page in a photo grid. But after doing so, I want to know how I can assign a url to each of those photos. I need them each to point to a specific page 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"
   }
]

Upvotes: 0

Views: 57

Answers (3)

ValLeNain
ValLeNain

Reputation: 2304

I'm not quite sure what you mean by

I need them each to point to a specific page url.

Since your pictures already have a URL (the one in your JSON), do you want an anchor so when you type the specific URL, the page "moves automatically" to the specific picture ?

Upvotes: 0

Tom
Tom

Reputation: 345

Figured this out. Used an if statement but will also try using a switch statement as well.

Upvotes: 0

fmsf
fmsf

Reputation: 37147

You should be careful with slamming JSONs into the URL as get requests have limits in size, and a JSON can grow really big depending on what you put there.

Given this, if you have your json in a variable:

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

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

You can make it a string with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify and save it safely to the url:

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

Upvotes: 1

Related Questions