使用JQuery解析数据

Question

我有一个容器，在一个选项卡上有Google maps API，在另一个选项卡上有图像。当从列表中选择一个位置时，我想要在另一个选项卡中更改图像。

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

它看起来像这样：

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

我想找到股利（ID）的文本，然后从列表中查找相关的图像，然后将图像的src设置为新选择的图像。

我该如何解析列表并获取基于＃loc-id文本的图像中的url，然后设置＃位置图像？

这是我到目前为止有：

$('#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)); 

谢谢！

Answer 1

您可以分析与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 
});