CODEWITHSUNDEEP
javascriptjqueryarraysobjectappend
Jhauge
Jhauge

Reputation: 59

how to append iterated array with associated data inside appended div

I am attempting to add data to the DOM based on an object. Within the object is an array for 'tags'. When appending a new div to the DOM with the data from the object, the tags will not render correctly when I loop through them. They don't correspond with the object data they are associated with.

I am not sure how to get them to display correctly. Any ideas would 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 a prime location. Close to public transportation, schools, and shopping. This property is subject to 3rd party approval, Town CO and permits to be paid by the 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 for sale by owner in West Orange, NJ. Charming colonial in great location on large park-like property in West Orange, border of Roseland. Living room with beamed ceiling and wood stove, eat-in kitchen with granite countertops. Updated bath, oversized laundry room off kitchen also serves as pantry. Spiral staircase leads to 3 bedrooms on second floor. Three-season sunroom leads to deck and beautiful backyard, great for entertaining. Fenced front and side yard, with 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 a prime location. Close to public transportation, schools, and 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 a prime location. Close to public transportation, schools, and 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 for houses in images object
var home = houses.house;

// create house card for 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 for code issue https://jsfiddle.net/vtc1ewrz/

Upvotes: 0

Views: 37

Answers (1)

user4454229
user4454229

Reputation:

Your code is a bit messy, you're approaching this from the wrong angle. But the true problem is that you're applying the tags to an element that hasn't been added to the page yet. And then you repeat the process, so you're basically replacing .homes-tags on every new house you're iterating over.

I've changed the code to the following, thus solving your problem:

// create house card for 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, to be honest, this isn't great in general. You're mixing logic with presentation, for example. Also, $.each is more ‘expensive’ than simply using a for loop.

Upvotes: 1

Related Questions