• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 531
  • Last Modified:

Ajax update from JSON data- index loop

Hi,

In the following example getjsondata.php returns
{"id1":"Banana","id2":"Apple","id3":"Pear"}

and I update each element manually using the json data , thus

$.getJSON("getjsondata.php", function(data) {                        
      $("#id1").html(data.id1);
      $("#id2").html(data.id2);
      $("#id3").html(data.id3);
});      

How can I iterate through the json array to update each element returned in the json string
In otherwords, looking for something like

keys = getkeys(data)
foreach key in keys {
 $(key).html = data.[key]
}

As a bonus, I would like to create a <div id='xxx'>value</div> when an array index returned in the json data does not already exist in the DOM

Thanks
BT
Complete code:

<html>
<head>
	<script src='scripts/json2.js' type='text/javascript'></script>
	<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>


		<script type="text/javascript">
		$(function(){

			
			$('#update').click ( function () {
				$.getJSON("getjsondata.php", function(data) {				
				$("#id1").html(data.id1);
				$("#id2").html(data.id2);
				$("#id3").html(data.id3);
				});			
			});
		});
			
				
		</script>
		
</head>
<body>
	
	<p><a id='update' href='#'>Update</a></p>
	<div id='id1'></div>
	<div id='id2'></div>
	<div id='id3'></div>
</body>
</html>

Open in new window

0
brothertom
Asked:
brothertom
  • 3
  • 2
2 Solutions
 
hieloCommented:

<html>
<head>
        <script src='scripts/json2.js' type='text/javascript'></script>
        <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>


                <script type="text/javascript">
                $(function(){

                        
                        $('#update').click ( function () {
                                $.getJSON("getjsondata.php", function(data) {  
						  /*                         
                                $("#id1").html(data.id1);
                                $("#id2").html(data.id2);
                                $("#id3").html(data.id3);
						  */
						  for( var k in data)
						  {
						  	$("#"+k).html( data[k] );
						  }
                                });                     
                        });
                });
                        
                                
                </script>
                
</head>
<body>
        
        <p><a id='update' href='#'>Update</a></p>
        <div id='id1'></div>
        <div id='id2'></div>
        <div id='id3'></div>
</body>
</html>

Open in new window

0
 
brothertomAuthor Commented:
Cool - thanks for that - any thoughts on testing if an element exists and adding it to the DOM if not?

Thanks
BT
0
 
hieloCommented:
jquery handles that for you internally (silently - meaning no errors will be triggered. Simply nothing will be inserted since it cannot find the element).
0
 
brothertomAuthor Commented:
Useful to know about the no error thing - I'll raise a more suitable question about adding elements.

Cheers
BT
0
 
brothertomAuthor Commented:
Many thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now