javascript 解析json格式数据，动态显示到页面

有一段数据通过php，从elasticsearch里取出来的，格式化成了json格式，打到页面上。

查出来的数据，json的key是动态的。有可能多也可能少，类似

{
    "took": 6,
    "timed_out": false,
    "_shards": {
        "total": 2,
        "successful": 2,
        "failed": 0
    },
    "hits": {
        "total": 2,
        "max_score": 9.163572,
        "hits": [{
            "_index": "test",
            "_type": "t1",
            "_id": "AVW6JAgJC_jQFCK_I8Oq",
            "_score": 9.163572,
            "_source": {
                "type": "t1",
                "num": "123456",
                "str1": "abcsdffsf"
            }
        },
        {
            "_index": "test",
            "_type": "t2",
            "_id": "AVW5dKcpC_jQFCK_AZbS",
            "_score": 8.018126,
            "_source": {
                "type": "t2",
                "str2": "test2",
                "str3": "testaaa",
                "str4": "testvvv"
            }
        }}]
    }
}

我们可以看到，hits里的_source里,key和value，每个hits是不一样的

现在我要动态的显示在页面上，就是查出来的数据全部显示到页面上，以最多的_source列为标准，没有的字段就留空。

比如这里，显示成

num    str1    str2    str3    str4   type

123456 abcsdffsf                       t1

               test2  testaaa testvvv  t2

那么有两个问题

1.js解析如何做？
2.如何动态插入（比如，通过innerHTML的方式）

---

先用js代码整理数据，比如先用统计出所有的keys。然后用table逐行插入。

不过建议使用一套数据绑定框架，比如vue.js
http://vuejs.org/