javascript - 将 knockout 与关联数组一起使用

Question

我对使用 knockout JS 很陌生，所以非常感谢任何帮助!所以基本上我得到的数据是这样的:

    [{ 
   "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"
   }
}]

我想做的是用这些数据填充一个表，这样它看起来像这样:

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

等...

我想知道这是否可以使用 knockout js 或者是否有更好的方法？我有一个 JSFiddle 以及我目前所拥有的:

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

Answer 1

在不使用任何工具包/库/框架的情况下，这已经(应该)是一项非常容易的任务。
首先，请注意 JS 没有关联数组，它有数组(本质上是增强对象)和对象。您正在处理后者。

这是我的做法:

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]);
            }
        }
    }
}

然后，您将获得列出所有可用键的 header 数组，并且在 tbl 对象中，您可以找到每个键对应的值数组。编写一个循环打印出您需要打印的内容应该很容易。
或者，您可以使用 header 数组并生成输出行“实时”:

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

现在，这将适用于我所知道的所有浏览器，包括一些人坚持使用的那些破旧的 IE。如果你不太关心这些浏览器(反正我不关心)，你可以很容易地这样写:

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

免责声明
这段代码是我随手写的，没有经过测试，所以你可能还有一些调试工作要做。所有这三个片段，在我看来，都是不言自明的，但如果不是很清楚，请随时询问有关给定陈述的更多细节。

注意:
添加此免责声明后，我确实在我的控制台中测试了我在此处给出的最后一个片段，我得到的结果是:

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

其中，格式化 asside 似乎是您所追求的