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!

Answer 1

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
});