jquery and json

Tripnologist

Tripnologist

Tripnologist

Soldato
Joined
12 May 2007
Posts
3,896
Location
Bristol
I have a map with 4 layers, each layer having markers for various shops. What I need to do is this.

- User chooses shop from select
- Script grabs shop name and then finds the correct data for that shop from json.

I have a rough idea of how the script should look but don't know how to write it correctly.

Code: 
    $('#shopselect').change(function() {
        $.ajax({
    	type: "GET",
    	url: "data.txt",
    	dataType: "json",
    	success: function(data) {
    
    	var selected = $('#shopselect option:selected').text()
    	
    	if ($(".layer1:visible").length) {
    		$("#viewport").mapbox("center", { 
    			x: shops." + selected + ".l1x, 
    			y: shops." + selected + ".l1y 
    		});
    	} else if ($(".layer2:visible").length) {
    		$("#viewport").mapbox("center", { 
    			x: shops." + selected + ".l2x, 
    			y: shops." + selected + ".l1y 
    		});
    	} else if ($(".layer3:visible").length) {
    		$("#viewport").mapbox("center", { 
    			x: shops." + selected + ".l3x, 
    			y: shops." + selected + ".l1y 
    		});
    	} else if ($(".layer4:visible").length) {
    		$("#viewport").mapbox("center", { 
    			x: shops." + selected + ".l4x, 
    			y: shops." + selected + ".l1y 
    		});
    	}
    }
    });

The json looks like so.

Code: 
    {
    shops:{
        primark:{
            l1x:310,
            l1y:132,
            l2x:388,
            l2y:264,			
            l3x:530,
            l3y:355,
            l4x:670,
            l4y:450
        },
        boots:{
            l1x:310,
            l1y:132,
            l2x:388,
            l2y:264,			
            l3x:530,
            l3y:355,
            l4x:670,
            l4y:450
        }		
    }
}


Is there anyone who could point me in the right direction.
 
Last edited:
Thanks for that.

I'm rather new to json so would it just be shops.primark.l1.x to retrieve the value?

and if so, am I right in thinking the correct way to add in a variable would be like so..

shops.[selected].l1.x

instead of

shops." + selected + ".l1.x
 
I'd look into using php except we use asp.net and I'm just a front end guy/creative dir. Had looked into doing this with flash but were told it'd be 2 weeks and £12k so I've been lumped into doing it with jquery. The front end I've done is quite nice and works really well, it's just this bit I'm struggling with so thanks for the help.

There is a distinct lack of json/jquery tutorials out there which explain it for someone who's never used it before.
 
I've given that a go and it works great, thanks.

However, how would I go about grabbing just specific values rather than all of them for the selected shop? I need to populate this by replacing the coords for whatever layer is active.

Code: 
$("#viewport").mapbox("center", { 
    			x: 313, 
    			y: 414 
    		});


So I'd need it populated something like..
Code: 
$("#viewport").mapbox("center", { 
    			x: shops.[selected].locations.[activelayer].x, 
    			y: shops.[selected].locations.[activelayer].y 
    		});

I can retrieve the active layer with the following which will return l1, l2, l3 or l4.
Code: 
var activelayer = $('.current-map-layer').attr('id');


I just can't figure out how to write it in to the script you posted above.
 
Last edited:
Okay, almost there now.

PHP: 
$('#shopselect').change(function() {
       
            $("#result").text('');
            
            var selected = $('#shopselect').val();
			var activelayer = $('.current-map-layer').attr('id');

            $.getJSON("data.txt", function(data) {

                var shop = data.shops[selected];

				
                if ( shop ) {

                      $("#result").append("" + data.shops[selected].locations[activelayer].x + " " + data.shops[selected].locations[activelayer].y + "<br/>");

                }
            });
        });

This will return the two results I need but I can't seem to shorten it.
Instead of
data.shops[selected].locations[activelayer].x
if I try to use
[shop].locations[activelayer].x
firebug comes up saying [shop].locations is undefined.
 
Last edited:
That's a winner! Thank you so so much. You've saved me so much time (which I don't have available) of fiddling about.

Now once I have this all finished, I can spend some time figuring it all out so I can do it myself next time. Thanks again.
 
Yeah, that's my problem. I have a rough understanding of how it should work, I just need to learn how to actually do it.

Things like removing the dot before the variable. To me, common sense would say it should be there because if I want the final output to be shop.locations.l1, if you didn't know better, you'd put it as shop.locations.[activelayer] instead of shop.locations[activelayer].
 
You must log in or register to reply here.
Back
Top Bottom