JSFiddle - React, Tailwind, and code Playground

by dactivo

HTML

<input id="storeLocatorData" name="storeLocatorData" type="hidden" value=""/>

<img src="" id="location-image"/>

<ul id="list">
<li><div id="loc_2">location 2</div></li>
<li><div id="loc_3">location 3</div></li>
</ul>

JavaScript

var eljson='[{"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://allesinalab.uchicago.edu/wp-content/uploads/2014/05/Unknown-person.gif"},{"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://bartowcountyscanner.com/images/unknown.png"}]';
function getObjects(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(getObjects(obj[i], key, val));
        } else if (i == key && obj[key] == val) {
            objects.push(obj);
        }
    }
    return objects;
}
$(function()
{
$("#list div").click(function()
                     {
           theid=$(this).attr("id").replace("loc_","");

             
 var objs=jQuery.parseJSON( eljson);
                      //   console.info( objs);
                      //   console.info(objs.length);
                         
 objs=getObjects(objs, "id",theid);
       
 if(objs.length>0)
 {
       $("#location-image").attr("src",objs[0].LocationPhoto);
     
 }
                         console.info(objs);
/*for(i=0;i<objs.length;i++)
{
    if(objs[i].id==theid)
    {
      console.info(objs[i]);
        $("#location-image").attr("src",objs[i].LocationPhoto);
        
    }
    
}*/
                     });
 });