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