?
Solved

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

Posted on 2016-10-18
4
Medium Priority
?
97 Views
Last Modified: 2016-10-19
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
0
Comment
Question by:karthik80c
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41848681
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
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41848685
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
 

Author Closing Comment

by:karthik80c
ID: 41850473
Thanks Julian . Its Working
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41850519
You are welcome.
0

Featured Post

Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question