使用JQuery解析数据

Parsing data using JQuery

本文关键字：数据 JQuery 使用更新时间：2023-09-26

我有一个容器，一个标签上有谷歌地图API，另一个标签上有图像。当从列表中选择位置时，我想在另一个选项卡中更改图像。

我有一个隐藏的输入字段，存储与ID和图像的位置列表。当一个列表项被点击时，会有一个div，它的ID是

它看起来像这样:

<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"}]/>

我想找到div (ID)的文本，然后从列表中找到相关的图像，然后将图像的src设置为新选择的图像。

我该如何解析列表并根据#loc-id文本获取图像中的url，然后设置#location-image?

到目前为止我写的是:

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

完整的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));

谢谢!

可以用JSON解析数组，如下所示:

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