user2988338
user2988338

Reputation:

Displaying json data on Google Map

i am currently working on my University assignment and i am trying to display json data on google map users google markers. I have enabled to display all the json files, however i cannot seem to figure a way out to only display json data according to an ID. for instance, for my each object i have given id which starts from 1 to 10. If i want to display only the json object which the ID is 1. how can i do this?

The code below is my javascript file which is already working, but it displays all the json objects.

$.getJSON('json/clothes.json', function(data) {    
$.each(data.products, function (key, data)
{

    var latLng = new google.maps.LatLng(data.lat, data.lng);
    var goldStar = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var marker = new google.maps.Marker({
    position: latLng,
    animation: google.maps.Animation.DROP,
    icon: goldStar,
    map: map
    });

    var details = data.name + ", " + data.Price + ".";

    InfoWindow(marker, map, infowindow, details);

    //    });
});
});




function InfoWindow(marker, map, infowindow, strDescription)
{
google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
});
}

And this is my json file

 {
    "products": [
                    {
                    "id":"1",
                    "name":"Jack and Jones",
                    "indexname":"Firetrap",
                    "url": "json_img/clothe1.jpg",
                    "ImgPath": "json_img/pic1.jpg",
                    "category":"T-shirt",
                    "Price":"£45.00",
                    "Size":"Medium",
                    "Colour":"Black & White",
                    "lat": 53.646029,
                    "lng": -1.779968,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"2",
                    "name":"G-star",
                    "indexname":"Adidas",
                    "url": "json_img/clotheeee.jpg",
                    "ImgPath": "json_img/pic3.jpg",
                    "category":"Shirt",
                    "Price":"£65.00",
                    "Size":"Large",
                    "Colour":"Purple",
                    "lat": 53.646284,
                    "lng": -1.781434,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"3",
                    "name":"Diesel",
                    "indexname":"Henleys",
                    "url": "json_img/clothes.jpg",
                    "ImgPath": "json_img/pic15.jpg",
                    "category":"Jumper",
                    "Price":"£80.00",
                    "Size":"Large",
                    "Colour":"Cream",
                    "lat": 53.640434,
                    "lng": -1.797482,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"4",
                    "name":"Armani",
                    "indexname":"Lacost",
                    "url": "json_img/dsc_0031_5_5.jpg",
                    "ImgPath": "json_img/pic8.jpg",
                    "category":"Jacket",
                    "Price":"£92.00",
                    "Size":"Small",
                    "Colour":"Black",
                    "lat": 53.644037,
                    "lng": -1.781551,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"5",
                    "name":"Lacost",
                    "indexname":"Duck & Cover",
                    "url": "json_img/download.jpeg",
                    "ImgPath": "json_img/pic19.jpg",
                    "category":"Joggers",
                    "Price":"£110.00",
                    "Size":"Medium",
                    "Colour":"Black",
                    "lat": 53.647168,
                    "lng": -1.783184,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"6",
                    "name":"Adidas",
                    "indexname":"Police 883",
                    "url": "json_img/henleys.jpg",
                    "ImgPath": "json_img/pic12.jpg",
                    "category":"Coat",
                    "Price":"£55.00",
                    "Size":"Small",
                    "Colour":"Brown",
                    "lat": 53.651078,
                    "lng": -1.783558,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"7",
                    "name":"Calvin Klein",
                    "indexname":"Jack & Jones",
                    "url": "json_img/g-starrrrr.png",
                    "ImgPath": "json_img/pic9.jpg",
                    "category":"Jacket",
                    "Price":"£58.00",
                    "Size":"Medium",
                    "Colour":"Silver",
                    "lat": 53.646029,
                    "lng": -1.779968,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"8",
                    "name":"Boss",
                    "indexname":"Firetrap",
                    "url": "json_img/red.png",
                    "ImgPath": "json_img/pic4.jpg",
                    "category":"Shirt",
                    "Price":"£60.00",
                    "Size":"Small",
                    "Colour":"Navy",
                    "lat": 53.646029,
                    "lng": -1.779968,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"9",
                    "name":"Duck & Cover",
                    "indexname":"Lewis",
                    "url": "json_img/nike.png",
                    "ImgPath": "json_img/pic20.jpg",
                    "category":"Coat",
                    "Price":"£45.00",
                    "Size":"Large",
                    "Colour":"Navy",
                    "lat": 53.646029,
                    "lng": -1.779968,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"10",
                    "name":"Police 883",
                    "indexname":"Top Man",
                    "url": "json_img/DKNY.jpg",
                    "ImgPath": "json_img/pic10.jpg",
                    "category":"Jacket",
                    "Price":"£50.00",
                    "Size":"Large",
                    "Colour":"White & Black",
                    "lat": 53.647168,
                    "lng": -1.783184,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"11",
                    "name":"H & M",
                    "indexname":"Calvin Klein",
                    "url": "json_img/adidas.jpg",
                    "ImgPath": "json_img/jean2.jpeg",
                    "category":"Jeans",
                    "Price":"£80.00",
                    "Size":"Large",
                    "Colour":"Dark Blue",
                    "lat": 53.640434,
                    "lng": -1.797482,
                    "link": "view.html",
                    "map": "map.html"
                    },


                    {
                    "id":"12",
                    "name":"Firetrap",
                    "indexname":"Lacoste",
                    "url": "json_img/adidas1.jpg",
                    "ImgPath": "json_img/jean1.jpg",
                    "category":"Jeans",
                    "Price":"£60.00",
                    "Size":"large",
                    "Colour":"Light Blue",
                    "lat": 53.647168,
                    "lng": -1.783184,
                    "link": "view.html",
                    "map": "map.html"
                    }
                ]
 }

I would be very grateful if you could tell me how can i only display json object with ID number 1 instead of all objects.

Thanks.

Upvotes: 0

Views: 1250

Answers (1)

Ma Yubo
Ma Yubo

Reputation: 219

$.each(data.products, function (key, data)
{    // add this here
        if(data.id=="1"){
      //run your code
     }   

}

Upvotes: 1

Related Questions