Question

I need help understanding the best way to manipulate a JavaScript data structure (if you call it that?). I come from a Perl background and am trying to iterate through a JavaScript data structure to update a div (or table) on the fly. Currently I’m just making the data a variable (data) to get going. once I have that sorted then I will use jquery’s ajax methods to get the data as a json object on the fly. It’s my understanding that the data structure I’m currently generating is the same thing I would get if it were json?? if not then I guess thats another question..

I have searched many times for such a tutorial but they are all close but haven’t found one that meets my needs…

I would like to in the future be able to re-order the array and repopulate the #data_table div so part of my question is: is this even the best way to represent the data? Then I want to update just one part of the array like a companies phone number or add a person then redraw the div from this updated array…

The end result to the user could look like:

Company: 99 Beans, Auckland, Ph: 360499
People:
Matt, 6471
Christiaan, 6472
Michelle, 6473
Judy, 6474

Company: ….
* Next company and so forth..

My code so far is like this (except I have 500+ entries in the data array and only 2 here):

I have taken some of this code from another question I found here and tried to make it work for my type of structure..

<script>
$(document).ready(function() {

var r = new Array();

var data= [
{
  "id":"6477",
  "c":"99 Beans",
  "ci":"Auckland",
  "p":"09 360499",
  "co":[
        {"id":"6471","c":" NZ", "n":"Matt" },
        {"id":"6472","c":" NZ", "n":"Chrstiaan" },
        {"id":"6473","c":" NZ", "n":"Michelle" },
        {"id":"6474","c":" NZ", "n":"Judy " },
        {"id":"6475","c":" NZ", "n":"Kate  " },
        {"id":"6476","c":" NZ", "n":"Unknown Person" }
       ]
},
{"id":"7145", "c":"A1 Ltd", "ci":"Te Puke ","p":"06 870090",
  "co":[{"id":"7145","c":" NZ", "n":"Alan" }
   ]
   },
];

// this alert used to work, when I had the data as an array of arrays so there must be a problem with how I'm referencing it or my data structure is wrong??
alert (data.length + " companies" );//+ data[455].co[0].n);

  var j = -1;
    for (var key=0, size=data.length; key<size; key++) {
     // first div 
      r[++j] ='<div>';
      r[++j] = data[key].id;
      r[++j] = ' - ';
      r[++j] = data[key].c;
      r[++j] = ' - ';
      r[++j] = data[key].p;
      r[++j] = '<br />';
     //inner div 

   var k = -1 ;
    for (var key1=0, size1=data[key].d.length; key1<size1; key1++) {
      r[++j] ='<div>';
      r[++j] = data[key].d.[key1].n + ' - ' + data[key].d.[key1].c + ' - ';
      r[++j] = '</div>';
   }  

      r[++j] = '</div>';
    } 

  $('#data_table').html(r.join('')); 

});

</script>

<div id="data_table"></div>

Answer 1

For the “rendering an JSON object to HTML”, you may want to have a look at jQuery.template() which allows to render pieces of HTML with a template syntax. I have never used it so I do not know how well it can perform with very big lists… (also note that it is still in beta)

UPDATE

Here is a working example (it might not be optimal or anything) but you should see the general idea 😉
http://jsfiddle.net/tsimbalar/A9uYP/

UPDATE 2 for sake of completeness and traceability

There was a syntax error in the original code which prevented the alert() from executing (and all following code).
See comment :

Your code is not working because of a syntax error in
data[key].d.[key1].n., which is invalid syntax. (it should be data[key].d[key1].n, I suppose. Use the Firebug extension ofr Firefox to detect this kind of issues that would otherwise go unnoticed.

After fixing this typo, it is easy to iterate over the contents of the object using jQuery.each() as mentioned by catalpa in another answer. You can then build HTML elements (i.e. $("<div/>")) and append them to existing items of the page with append() . (see the fiddle about that part)