---
title: "cannot generate html from JSON data"  
description: "cannot generate html from JSON data"  
author: "Lady Bird Johnson"  
published: 2013-06-20  
updated: 2013-06-20  
canonical: https://www.mindstick.com/forum/1251/cannot-generate-html-from-json-data  
category: "json"  
tags: ["json"]  
reading_time: 2 minutes  

---

# cannot generate html from JSON data

Hi Everyone,\
\
I'm trying to use [JSON data](https://www.mindstick.com/forum/782/how-to-send-request-amp-amp-response-from-json-data-using-asp-dot-net) (returned from PHP) to create HTML for display to the [client side](https://www.mindstick.com/forum/160418/what-are-the-best-practices-for-securely-storing-bearer-tokens-on-the-client-side).\
\
I've got this in a [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) that is also serving to [populate](https://www.mindstick.com/blog/60/populate-records-in-second-listbox-according-to-the-selection-in-first-list-box) [google maps](https://www.mindstick.com/articles/12399/google-maps-updated-with-india-specific-features).\
\
function searchLocationsNear(center) {\
\
//some AJAX that's [working fine](https://answers.mindstick.com/qa/95550/why-is-the-safari-browser-not-working-fine)//\
\
success:function(data, [response](https://www.mindstick.com/forum/12719/how-to-make-response-write-display-special-character-like-lt-gt)){\
console.log(data);\
var markerNodes = data;\
\
var bounds = new google.maps.LatLngBounds();\
\
for (var i = 0; i < markerNodes.length; i++) {\
var uid = markerNodes[i].id;\
var name = markerNodes[i].name;\
var address = markerNodes[i].address;\
var [distance](https://www.mindstick.com/blog/12028/what-distance-learning-is-not) = parseFloat(markerNodes[i].distance);\
var avatar = markerNodes[i].avatar;\
var bio = markerNodes[i].bio;\
var rate = markerNodes[i].price;\
var latlng = new google.maps.LatLng(\
parseFloat(markerNodes[i].lat),\
parseFloat(markerNodes[i].lng));\
\
createOption(name, distance, i);\
createMarker(latlng, name, avatar, uid, bio, rate);\
bounds.extend(latlng);\
\
var html = "<div style='float:left; padding-right:10px;'><img src='user/"+uid+"/"+avatar+"'s alt='Tutor - "+name+" [Profile Picture](https://answers.mindstick.com/qa/103583/changing-skype-profile-picture-how)'></div><div \
\
class='infowindow'><h3>" + name + "</h3><hr><h4>Rate: "+rate+"</h4>"+bio+"</div>"; \
console.log(html);\
\
$('#thumblist').html(html);\
console.log($('#thumblist'));\
}\
This Google Map is populating fine, and the console.log($('#thumblist')); shows the two entries that I need to show, but only [one of them](https://answers.mindstick.com/qa/47593/what-are-the-prevalent-water-proofing-systems-write-a-short-notes-on-any-one-of-them) is appended to #thumblist \
\
Any help on above is really appreciated.

## Replies

### Reply by AVADHESH PATEL

Hi,\
You're overwriting the #thumblist HTML on each iteration. Instead you should append:\
$('#thumblist').append(html);\
.html() will overwrite the entire content of the element, whereas .append() will leave the current content intact and just add to the end.


---

Original Source: https://www.mindstick.com/forum/1251/cannot-generate-html-from-json-data

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.