javascript - how to append iterated array with associated data inside appended div -

i attempting add data dom based on object. within object array 'tags'. when appending new div dom data object, tags not render correctly when loop through them. don't correspond object data associated with.

i not sure how them display correctly. ideas help, thank you

var houses = {   "house": [{     "source": "images/background.jpg",     "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],     "short_desc": "3 br, 2 bath, bellville, nj",     "long_desc": "great 2 family in prime location. close public transportation, schools, , shopping. property subject 3rd party approval, town co , permits paid buyer.",     "address": "268 washington ave belleville, nj 07109",     "sq_ft": "3,456 sqft",     "price": "262,000",     "tags": ["for purchase", "multi-family", "duplex", "house", "3 bed", "2 bath"]   }, {     "source": "images/background.jpg",     "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],     "short_desc": "3 br, 2 bath, west orange, nj",     "long_desc": "single family home sale owner in west orange, nj. charming colonial in great location on large park-like property in west orange, border of roseland. living room beamed ceiling , wood stove, eat-in kitchen granite countertops. updated bath, oversized laundry room off kitchen serves pantry. spiral staircase leads 3 bedrooms on second floor. three-season sunroom leads deck , beautiful backyard, great entertaining. fenced front , side yard, koi pond. newer roof, freshly painted exterior.",     "address": "55 laurel ave west orange, nj 07052",     "sq_ft": "1,618 sqft",     "price": "344,900",     "tags": ["for purchase", "single-family"]   }, {     "source": "images/background.jpg",     "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],     "short_desc": "3 br, 2 bath, berkely heights, nj",     "long_desc": "great 2 family in prime location. close public transportation, schools, , shopping.",     "address": "268 washington ave belleville, nj 07109",     "sq_ft": "3,456 sqft",     "price": "140,000",     "tags": ["for purchase", "multi-family", "duplex", "house"]   }, {     "source": "images/background.jpg",     "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],     "short_desc": "1 br studio, newark, nj",     "long_desc": "great 2 family in prime location. close public transportation, schools, , shopping.",     "address": "268 washington ave belleville, nj 07109",     "sq_ft": "3,456 sqft",     "price": "140,000",     "tags": ["for purchase", "single-family", "2 car garage", "house"]   }, ] }  // set variable houses in images object var home = houses.house;  // create house card each house in houses object $.each(home, function(index, value) {     var new_tag = home[index].tags;    $.each(new_tag, function(key, value) {     $(".homes-tags").append("<p class='tag'>" + value + "</p>");   });     $('#homes-list').append('<div class="house-card"><div class="row"><div class="col span_7"><h2 class="short-desc">' + value.short_desc + '</h2><p class="address">' + value.address + '</p><p class="sqft">' + value.sq_ft + '</p><p class="price">' + value.price + '</p><p class="long-desc">' + value.long_desc + '</p></div><div class="col span_5 image"><img src="' + value.source + '" width="100%" /><p class="homes-tags"></p></div></div><div class="clear"></div></div>');  }); 

please see jsfiddle code issue https://jsfiddle.net/vtc1ewrz/

your code bit messy, you're approaching wrong angle. true problem you're applying tags element hasn't been added page yet. , repeat process, you're replacing .homes-tags on every new house you're iterating over.

i've changed code following, solving problem:

// create house card each house in houses object $.each(home, function(index, value) {   var new_tag = home[index].tags;    var newhtml = '<div class="house-card"><div class="row"><div class="col span_7"><h2 class="short-desc">' + value.short_desc + '</h2><p class="address">' + value.address + '</p><p class="sqft">' + value.sq_ft + '</p><p class="price">' + value.price + '</p><p class="long-desc">' + value.long_desc + '</p></div><div class="col span_5 image"><img src="' + value.source + '" width="100%" /><div class="homes-tags">';    $.each(new_tag, function(key, value) {     newhtml += '<p class="tag">' + value + '</p>';   });    newhtml += '</div></div></div><div class="clear"></div></div>';    $('#homes-list').append(newhtml); }); 

however, honest, isn't great in general. you're mixing logic presentation, example. also, $.each more ‘expensive’ using for loop.