Using knockout with an associative array

Question

I'm quite new to using knockout JS so any help would be much appreciated! So basically I've got data coming in like this:

    [{ 
   "gjr":{
      "id":"gjr",
      "firstname":"one",
      "companyid":"ff05t5",
      "companyname":"GMC"
   },
   "68g":{
      "id":"68g",
      "firstname":"two",
      "companyid":"ff05t5",
      "companyname":"GMC"
   },
   "ghj":{
      "id":"ghj",
      "firstname":"three",
      "companyid":"a23atr",
      "companyname":"Ford"
   },
   "68f":{
      "id":"68f",
      "firstname":"four",
      "companyid":"ff05t5",
      "companyname":"GMC"
   },
   "f78":{
      "id":"f78",
      "firstname":"five",
      "companyid":"gjd94d",
      "companyname":"Jaguar"
   },
   "fh5":{
      "id":"fh5",
      "firstname":"six",
      "companyid":"gjd94d",
      "companyname":"Jaguar"
   }
}]

and what i'm trying to do is populate a table with this data so it would look something like this:

ID        FirstName         CompanyID         CompanyName<br/>
gjr       one               ff05t5            GMC<br/>
68g       two               ffo5t5            GMC<br/>
ghj       three             a23atr            Ford<br/>

etc...

I was wondering if this is possible using knockout js or is there a better method? I've got a JSFiddle with what i've got so far:

http://jsfiddle.net/GJ7qH/15/

Answer 1

.observableArray method accepts only an array, null or undefined.

Error: The argument passed when initializing an observable array must be an 
array, or null, or undefined.

You should deal with your data to prepare an array of objects.

Here is what I changed to your code to make it working fine. Check it out!

Hope it helps.

Answer 2

Without using any toolkit/lib/framework of any sort, this already is (should be) a pretty easy task.
First, please do note that JS doesn't have associative arrays, it has arrays (which are, in essence, augmented objects) and objects. You are dealing with the latter.

Here's how I'd do it:

var data = yourData[0],//your data is an array, containing a single object literal
    header = [];
    tbl = {},
    p, p2;
for(p in data)
{
    if (data.hasOwnProperty(p))
    {
        for (p2 in data[p])
        {
            if (data[p].hasOwnProperty(p2))
            {
                if (!tbl.hasOwnProperty(p2))
                {
                    header.push(p2);//add header value
                    tbl[p2] = [];//create array
                }
                tbl[p2].push(data[p][p2]);
            }
        }
    }
}

Then, you have the header array that lists all keys available to you, and in the tbl object, you find an array of values that go with each key. It should be pretty easy to write a loop that prints out just what you need to print out.
Alternatively, you can use the header array and generate the output rows "real-time":

var data = yourData[0],//your data is an array, containing a single object literal
    header,//leave undefined
    row = [],
    tbl = [],
    p, i, p2;
for(p in data)
{
    if (data.hasOwnProperty(p))
    {
        if (header === undefined)
        {
            header = [];
            for (p2 in data[p])
                header.push(p2);
            tbl.push(header.join("\t"));
        }
        for (i=0;i<header.length;++i)
            row.push(data[p][header[i]]);
        tbl.push(row.join("\t"));
        row = [];//re-initialize
    }
}
console.log(tbl.join("\n"));//should be pretty accurate

Now, this will work an all browsers I know, including those crummy old IE's that some people insist on using. If you don't care much for these browsers (I don't, anyway), you can easily write this:

var data = yourData[0],//your data is an array, containing a single object literal
    header;//leave undefined
    str = '';//output string
    p, i;
for(p in data)
{
    if (header === undefined)
    {//first time over
        header = Object.getOwnPropertyNames(data[p]);
        str = header.join("\t") + "\n";//stringify, tab separated, add new line
    }
    for (i=0;i<header.length;++i)
        str += data[p][header[i]] + "\t";//add value
    str += "\n";
}
console.log(str);//should be close to what you need

Disclaimer
I've written this code off the top of my head, none of it has been tested, so you may still have some debugging work ahead of you. All three of these snippets are, IMO, pretty self-explanatory, but feel free to ask for more details on a given statement if it isn't quite clear.

Note:
After adding this disclaimer, I did in fact test the last snippet I gave here in my console, the result I got was:

id  firstname   companyid   companyname
gjr one ff05t5  GMC 
68g two ff05t5  GMC 
ghj three   a23atr  Ford    
68f four    ff05t5  GMC 
f78 five    gjd94d  Jaguar  
fh5 six gjd94d  Jaguar  

Which, formatting asside seems to be what you're after