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

Comments

Post a Comment

Popular posts from this blog

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops', ...
Read more

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null ...
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens ...
Read more