javascript - 如何将 JSON 数据映射到表格/HTML？

Question

我得到一个json数据如下：

{
    "encoding_version" : 1,
    "root" : {
        "_type" : lookup_config_data",
        "Class" : ".key.LookData",
        "Tbl" : {
            "_type" : "lookup_table",
            "Class" : ".key.LookupTable",
            "Lhs" : { "_type" : "array<variant>", "_data" : [
                ".key.test1",
                ".key.test2",
                ".key.test3",
                ".key.test4",
                ".key.test5"                

            ] },
            "Groups" : { "_type" : "array<array<key>>", "_data" : [
                { "_type" : "array<key>", "_data" : [
                    ".key.data1",
                    ".key.data12"
                ] },
                { "_type" : "array<key>", "_data" : [
                    ".key.data2"
                ] },
                { "_type" : "array<key>", "_data" : [
                    ".key.data3"
                ] },
                { "_type" : "array<key>", "_data" : [
                    ".key.data4"
                ] },
                { "_type" : "array<key>", "_data" : [
                    ".key.data5"
                ] }


            ] }
        }
    }
}

有没有办法映射如下：

测试1->数据1，数据12

测试2->数据2

测试3->数据3

测试4->数据4

测试5->数据5

请帮忙。

谢谢！

标签： javascripthtmljson

Answer 1

看起来上面的数据有一个预定义的模式。因此需要注意模式定义的每个语法。但作为起点，您可以使用以下代码。

var obj = {
  "encoding_version" : 1,
  "root" : {
      "_type" : "lookup_config_data",
      "Class" : ".key.LookData",
      "Tbl" : {
          "_type" : "lookup_table",
          "Class" : ".key.LookupTable",
          "Lhs" : { "_type" : "array<variant>", "_data" : [
              ".key.test1",
              ".key.test2",
              ".key.test3",
              ".key.test4",
              ".key.test5"                

          ] },
          "Groups" : { "_type" : "array<array<key>>", "_data" : [
              { "_type" : "array<key>", "_data" : [
                  ".key.data1",
                  ".key.data12"
              ] },
              { "_type" : "array<key>", "_data" : [
                  ".key.data2"
              ] },
              { "_type" : "array<key>", "_data" : [
                  ".key.data3"
              ] },
              { "_type" : "array<key>", "_data" : [
                  ".key.data4"
              ] },
              { "_type" : "array<key>", "_data" : [
                  ".key.data5"
              ] }


          ] }
      }
  }
};

var newObj = {};
var keys = obj.root.Tbl.Lhs._data;
var values = obj.root.Tbl.Groups._data;

if (keys.length == values.length){
  keys.forEach((e,i)=>{
    newObj[extractData(e)] = values[i]._data.map(v=>extractData(v));
  })
}

function extractData(raw){
  return raw.split('.')[2];
}
console.log(newObj);

这newObj将是Lhs键到Groups值的映射。