javascript - Construct HTML from JSON object with $.each and .append -

i'm calling web service api php , response in json formatted this:

"hits": { "found": 23, "start": 0, "hit": [   {     "id": "data_upload_20150608_97",     "fields": {       "district": "city name",       "street": "street name",       "building_name": "blue tower",       "description": "some description text.",       "latlon": "0.0,0.0",       "website": "http:\/\/www.example.com/id"     } } 

response retrieved $.getjson following:

$("#myform").submit(function(event) {         event.preventdefault();         var search_term = $("#search_txt").val()         if(search_term.length > 0) {             $.getjson("assets/php/search.php?query="+search_term, function(result) {                 process_result(result);             });         }     }); 

what i'm trying achieve separate fields json in html structure like:

<div id="result"> <div class="row">     <div class="large-6">         <h2>city name</h2>         <div>district: city name</div>         <div>street: street name</div>         <div>building name: blue tower</div>     </div>     <div class="large-3">         <div>lat lon: 0.0,0.0</div>         <div>description: description text.</div>         <a href="http://www.example.com/id">link</a>     </div> </div> 

i've made function process results , display it, not getting far using $.each , .append. i'm not js person here function, looks quite messy, me:

function process_result(response_string) {         $.each(response_string, function(index, hit) {             $("#result").append(                 $( '<div />', { 'class': 'row' } ).append(                     $( '<div />', { 'class': 'large-6' } ).append(                         $.each(hit, function(key, value) {                             if(key == "district") {                                 $("#result").append("<h2>"+value+"</h2>");                             }                             if(key == "url") {                                 $("#result").append("<a href="+value+">link</a>");                             }                             else {                                 $("#result").append("<div>"+key+": "+value+"</div>");                             }                         })                     )                 )             )         })     } 

this not giving me desired result ie. row element printed on bottom. might way off here, , not sure using $.each here best way go i'm out of clue right now. if have better way approach this, love hear.

also, first question on so!

edit:

i had away processing json in php , pass raw json js , use following dom structure needed:

function process_result(response_string) {     var obj = json.parse(json.stringify(response_string));     //console.log(obj.hits.hit);     $("#result").empty();     for(var in obj.hits.hit){         var item = obj.hits.hit[i]['fields'];         var html = '';         html += '<div class="row"><div class="large-6 columns small-12">';         html += '<h2>'+item['district']+'</h2>';         html += '<div>district: '+item['district']+'</div>';         html += '<div>street: '+item['street']+'</div>';         html += '<div>building: '+item['building_name']+'</div>';         html += '</div>';         html += '<div class="large-6 columns">';         html += '<div>lat lon: '+item['latlon']+'</div>';         html += '<div>description: '+item['description']+'</div>';         html += '<a href="'+item['website']+'">link</a>';         html += '</div>';         $('#result').append(html);       }     } 

one way it: https://jsfiddle.net/lzbt5tr1/1/

var result = '{"hits": {"found": 23,"start": 0,"hit": [{"id": "data_upload_20150608_97","fields": {"district": "city name","street": "street name","building_name": "blue tower","description": "some description text.","latlon": "0.0,0.0","website": "http:\/\/www.example.com/id"}}]}}';  var obj = json.parse(result); console.log(obj.hits.hit); for(var in obj.hits.hit){     var item = obj.hits.hit[i]['fields'];     var html = '';     html += '<div class="row"><div class="large-6">';     html += '<h2>'+item['district']+'</h2>';     html += '<div>district: '+item['district']+'</div>';     html += '<div>street: '+item['street']+'</div>';     html += '<div>building: '+item['building_name']+'</div>';     html += '</div>';     html += '<div class="large-3">';     html += '<div>lat lon: '+item['latlon']+'</div>';     html += '<div>description: '+item['description']+'</div>';     html += '<a href="'+item['website']+'">link</a>';     html += '</div>';     $('#result').append(html); }