javascript - Output array to element classes -



javascript - Output array to element classes -

i'm trying output json object different parts of html page using same classes.

i'm importing json api when i've set info (via input fields) looks little bit this:

{ "trip": [ { // first object in trip-array "leg": [{ "tripid": "0", "origin": { "name": "new york", "time": "12:04" }, "destination": { "name": "albany", "time": "1:49" } },{ "tripid": "1", "origin": { "name": "albany", "time": "2:05" }, "destination": { "name": "boston", "time": "3:12" } }] }, { // sec object in trip-array "leg": [{ "tripid": "0", "origin": { "name": "new york", "time": "1:04" }, "destination": { "name": "albany", "time": "2:49" } },{ "tripid": "1", "origin": { "name": "albany", "time": "3:05" }, "destination": { "name": "boston", "time": "4:12" } }] }] }

i'm trying display info on website, can't behave way want to.

the first time around did (after fetching json via php-page):

function adddatatohtml(data){ var trips = data.trip; $.each(trips, function(){ document.getelementbyid('show_all_results'); var summary = document.createelement('div'); summary.innerhtml = "<span class='origin_time'>" + this.leg[0].origin.time + "&nbsp;</span><span class='origin_name'>&nbsp;" + this.leg[0].origin.name + "</span><span>-</span><span class='destination_time'>" + this.leg[leg.length-1].destination.time + "&nbsp;</span><span class='destination_name'>&nbsp;" + this.leg[this.leg.length-1].destination.name + "</span>"; document.getelementbyid('show_all_results').appendchild(summary); }); }

this works problem i'm having want add together button in code give me more info via display:block/none-functionality. button (and rest of information) created me having write in innerhtml part of js, ways i've tried haven't worked , guess it's me creating divs , other dom objects in js code means html doesn't recognize them. anyhow, more command of code i'm trying html:

<div id="show_all_results"> <div id='search_result_single'> // first results.... <div id='search_result_from_box'> <span class="origin_time"></span> <span class="origin_name"></span> </div> <div id='search_result_divider'> <span>-</span> </div> <div id='search_result_to_box'> <span class='destination_time'></span> <span class='destination_name'></span> </div> </div> <div id='search_result_single'> // sec results.... <div id='search_result_from_box'> <span class="origin_time"></span> <span class="origin_name"></span> </div> <div id='search_result_divider'> <span>-</span> </div> <div id='search_result_to_box'> <span class='destination_time'></span> <span class='destination_name'></span> </div> </div> ...and on. </div>

the js:

for (var = 0; < this.leg.length; i++) { var originname = document.getelementsbyclassname("origin_name"); var origintime = document.getelementsbyclassname("origin_time"); var desttime = document.getelementsbyclassname("destination_time"); var destname = document.getelementsbyclassname("destination_name"); (var x = 0; x < originname.length; x++) { var originnameitem = originname[x]; originnameitem.innerhtml = this.leg[0].origin.name; } (var y = 0; y < origintime.length; y++) { var origintimeitem = origintime[y]; origintimeitem.innerhtml = this.leg[i].origin.time; } (var z = 0; z < desttime.length; z++) { var desttimeitem = desttime[z]; desttimeitem.innerhtml = this.leg[this.leg.length - 1].destination.time; } (var = 0; < destname.length; a++) { var destnameitem = destname[a]; destnameitem.innerhtml = this.leg[this.leg.length - 1].destination.name; } }

is there can help me each part of leg-array different parts of page using same classes i've done? or there improve way? became long, sorry that, please allow me know if can provide additional information. thanks!

javascript html json

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -