How do i create a element based on server response in Jquery

Hi Experts ,

I want to create a element based on json response from server . Here is my json look like

[
  {
    "agentname": "Test Hari",
    "contact": "",
    "office": "",
    "mytours": "",
    "profilepic": "http://www.freyvogelfuneralhome.com/sitebuildercontent/sitebuilderpictures/heartc
.jpg",
    "Price": "",
    "Map": "",
    "Address": "test hari",
    "Photo1": "upload/image1.JPG",
    "Photo2": "upload/image1.JPG",
    "Photo3": "upload/image1.JPG",
    "Photo4": "upload/image1.JPG",
    "Photo5": "upload/image1.JPG",
    "Photo6": "upload/image1.JPG",
    "Photo7": "upload/image1.JPG"
  }
]

Open in new window


and i need each of the Photo1 ,2 ,3 to create a element like  this
<li><a href="#" data-image="upload/image1.JPG" class="active">Guest Bedroom 1</a></li>

Open in new window


tried with for loop i got only one picture 0

 for (var i = 0; i < propertyData.length; i++) {
 var content = ' <li><a href="#" '+propertyData[i]['Photo'+i]+' class="active">Picture '+i+'</a></li>';
$('#k-photos-labels-wrapper').append(content);

Open in new window


Any Suggestions on this
karthik80cAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
A note on your data. You have an array of one element  - an object with the properties you are interested in.

Therefore everything has to be relative to index 0 of the array. In your case I am assuming that the name of the variable holding the structure is

propertyData

Open in new window


Therefore you want to access the properties of
propertyData[0]

Open in new window


Tried with for loop i got only one picture 0
This is the reason - you were iterating over the array - which only has one element.

You can also use
for(var i in propertyData[0])

Open in new window

To iterate over the methods in the object rather than using propertyData.length
1
 
Julian HansenCommented:
Here is a sample
<script>
var data = [
  {
    "agentname": "Test Hari",
    "contact": "",
    "office": "",
    "mytours": "",
    "profilepic": "http://www.freyvogelfuneralhome.com/sitebuildercontent/sitebuilderpictures/heartc.jpg",
    "Price": "",
    "Map": "",
    "Address": "test hari",
    "Photo1": "upload/image1.JPG",
    "Photo2": "upload/image1.JPG",
    "Photo3": "upload/image1.JPG",
    "Photo4": "upload/image1.JPG",
    "Photo5": "upload/image1.JPG",
    "Photo6": "upload/image1.JPG",
    "Photo7": "upload/image1.JPG"
  }
];
$(function() {
	for(var i in data[0]) {
	  var m = i.match(/Photo(\d+)/);
	  if (m) {
		html = "Guest Bedroom " + m[1];
		var a = $('<a/>').addClass('active').html(html).data('image', data[0][i]);
		$('<li/>').append(a).appendTo('#k-photos-labels-wrapper');
	  }
	}
});
</script>

Open in new window

1
 
karthik80cAuthor Commented:
Thanks Julian . Its Working
0
 
Julian HansenCommented:
You are welcome.
0
All Courses

From novice to tech pro — start learning today.