Parsing data using JQuery

Question

I have a container that has a Google maps API on one tab and images on another. When a location is selected from a list, I want to image to change in the other tab.

I have a hidden input field which stores a list of locations with ID's and images. When a list item is clicked on, there's a div which has the ID.

It looks like this:

<input id="storeLocatorData" name="storeLocatorData" type="hidden" value="[{"id":2,"name":"name","lat":51.111113,"lng":-1.3111121,"category":"test","address":"Company 1","address2":"Test Road","address3":"","city":"Bristol","postal":"B90 5BD","country":"UK","phone":"","email":{},"image":"1181","LocationPhoto":"http://url/media/2728/logo.png"},{"id":3,"name":"name","lat":51.1113243,"lng":-1.331121,"category":"test","address":"Company 1","address2":"Test Road","address3":"","city":"Bristol","postal":"B90 5BD","country":"UK","phone":"","email":{},"image":"1181","LocationPhoto":"http://url/media/2728/header.png"}]/>

I want to find the text of the div (ID) then find the associated image from the list, then set the src of the image to the new selected image.

How would I parse the list and grab the url in image based on #loc-id text and then set #location-image?

Here's what I have so far:

$('#list').click(function () {
    //Change the src of img
    $(this).find('#loc-id').text();
    $('#location-image').attr('src', newVal);
});

Here's the full HTML:

                        <div id="map-container">
                            <div class="tabs mobile-hide">
                                <ul class="tab-links">
                                    <li class="active"><a class="tab-link-text" href="#tab1">Location Map</a></li>
                                    <li><a class="tab-link-text" href="#tab2">Location Photo</a></li>
                                </ul>

                                <div class="tab-content">
                                    <div id="tab1" class="tab active">
                                        <div id="panel-map">
                                            <div id="map"></div>
                                        </div>
                                    </div>

                                    <div id="tab2" class="tab">

                                        <img id="location-image" class="location-photo" src=""/> 
                                    </div>
                                </div>
                            </div>
                        </div>

                        var jsonMarkers = new List<object>
                                ();

                        foreach (dynamic l in this.Locations)
                        {
                            var media = Model.MediaById(l.image);
                            jsonMarkers.Add(new
                            {
                                id = l.LocationId,
                                name = l.address1,
                                lat = l.latitude,
                                lng = l.longitude,
                                address = l.address1,
                                address2 = l.address2,
                                address3 = l.address3,
                                city = l.city,
                                postal = l.postcode,
                                country = "UK",
                                phone = l.telephoneNumber,
                                email = l.bookingAfterEmail,
                                image = l.image,
                                LocationPhoto = url + media.NiceUrl
                            });


                        }
                        @Html.Hidden("storeLocatorData", Json.Encode(jsonMarkers));

Thanks!

Give the full HTML code please. We don't have list and location-image tags in your post. Thx — Nicolas Henrard, Jun 24 '14 at 10:40
It looks like your data is in JSON format. Try to parse it using the JSON parser. — emerson.marini, Jun 24 '14 at 10:41
@MelanciaUK I don't quite know to how to parse JSON - any advice would be appreciated. — DarkShadowAY, Jun 24 '14 at 10:43
Check this out: http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript — emerson.marini, Jun 24 '14 at 10:44
@MelanciaUK, that's on point, thanks. How do I parse based on the ID? Because there's a list of multiple locations. — DarkShadowAY, Jun 24 '14 at 10:47

score 1 · Accepted Answer · answered Jun 24 '14 at 10:45

You can parse the array with JSON, as such:

// Store a parsed array
var parsedArray = JSON.parse(document.getElementById('storeLocatorData').value);

// When we select the item
$('#list').click(function () {
    //Change the src of img
    var targetID = $(this).find('#loc-id').text();  // Get the ID

    // Since your array of objects isn't indexed, we need to loop to find the correct one
    var foundObject = null;
    for (var key in parsedArray) {
        if (parsedArray.hasOwnProperty(key) && parsedArray[key].id == targetID) {
            foundObject = parsedArray[key];
            break;
        }
    }

    // If we found the object, extract the image and set!
    if (!foundObject)
        return;

    var imageSrc = foundObject.LocationPhoto; // From the object
    $('#location-image').attr('src', imageSrc); // Set the new source
});

Eric this is amazing. Thank you! I'm currently having an issue where I have 3 list items, each has a class called .loc-id which brings in all 3 values. How would I bring in one just based on the parent? There is a li with attribute data-markerid but I can't seem to get the value it has. — DarkShadowAY, Jun 24 '14 at 12:04

Parsing data using JQuery

1 Answers1

Linked