如何显示JSON字符串中的特定数据?

时间:2016-05-25 13:19:59

标签: javascript html json google-sheets

我正在从Google电子表格网址中检索JSON格式的数据,如下所示。 (备选link to JSON file。)我只想解析它并显示基础数据。我能如何实现这一点,因为我想要的所有数据都使用相同的标签v标识?

google.visualization.Query.setResponse({
   "version":"0.6",
   "reqId":"0",
   "status":"ok",
   "sig":"1326357147",
   "table":{
      "cols":[
         {
            "id":"A",
            "label":"Ref",
            "type":"number",
            "pattern":"General"
         },
         {
            "id":"B",
            "label":"ÃÂrea",
            "type":"string"
         },
         {
            "id":"C",
            "label":"Curso",
            "type":"string"
         }
      ],
      "rows":[
         {
            "c":[
               {
                  "v":1.0,
                  "f":"1"
               },
               {
                  "v":"Diseño"
               },
               {
                  "v":"Flash CS4 básico"
               }
            ]
         },
         {
            "c":[
               {
                  "v":2.0,
                  "f":"2"
               },
               {
                  "v":"Diseño"
               },
               {
                  "v":"Freehand MX "
               }
            ]
         },
         {
            "c":[
               {
                  "v":3.0,
                  "f":"3"
               },
               {
                  "v":"Diseño"
               },
               {
                  "v":"Illustrator CS5"
               }
            ]
         },
         {
            "c":[
               {
                  "v":4.0,
                  "f":"4"
               },
               {
                  "v":"Diseño"
               },
               {
                  "v":"Photoshop CS4 avanzado"
               }
            ]
         },
         {
            "c":[
               {
                  "v":5.0,
                  "f":"5"
               },
               {
                  "v":"Informática"
               },
               {
                  "v":"Word"
               }
            ]
         },
         {
            "c":[
               {
                  "v":6.0,
                  "f":"6"
               },
               {
                  "v":"Informática"
               },
               {
                  "v":"Excel"
               }
            ]
         },
         {
            "c":[
               {
                  "v":7.0,
                  "f":"7"
               },
               {
                  "v":"Informática"
               },
               {
                  "v":"Access"
               }
            ]
         },
         {
            "c":[
               {
                  "v":8.0,
                  "f":"8"
               },
               {
                  "v":"Informática"
               },
               {
                  "v":"Outlook "
               }
            ]
         },
         {
            "c":[
               {
                  "v":9.0,
                  "f":"9"
               },
               {
                  "v":"Informática"
               },
               {
                  "v":"Powerpoint "
               }
            ]
         },
         {
            "c":[
               {
                  "v":10.0,
                  "f":"10"
               },
               {
                  "v":"Informática"
               },
               {
                  "v":"Office 2007"
               }
            ]
         },
         {
            "c":[
               {
                  "v":11.0,
                  "f":"11"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"Comercio Electrónico"
               }
            ]
         },
         {
            "c":[
               {
                  "v":12.0,
                  "f":"12"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"Estrategias implant. NNTT para pymes"
               }
            ]
         },
         {
            "c":[
               {
                  "v":13.0,
                  "f":"13"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"Facebook"
               }
            ]
         },
         {
            "c":[
               {
                  "v":14.0,
                  "f":"14"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"LinkedIn"
               }
            ]
         },
         {
            "c":[
               {
                  "v":15.0,
                  "f":"15"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"NNTT para directivos de Pymes"
               }
            ]
         },
         {
            "c":[
               {
                  "v":16.0,
                  "f":"16"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"NNTT para RRHH"
               }
            ]
         },
         {
            "c":[
               {
                  "v":17.0,
                  "f":"17"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"Telemarketing"
               }
            ]
         },
         {
            "c":[
               {
                  "v":18.0,
                  "f":"18"
               },
               {
                  "v":"NNTT Pymes"
               },
               {
                  "v":"Twitter"
               }
            ]
         },
         {
            "c":[
               {
                  "v":19.0,
                  "f":"19"
               },
               {
                  "v":"PRL y MA"
               },
               {
                  "v":"Educ. para la igualdad de oportunid."
               }
            ]
         },
         {
            "c":[
               {
                  "v":20.0,
                  "f":"20"
               },
               {
                  "v":"PRL y MA"
               },
               {
                  "v":"Fundament. adaptación LOPD en Pymes"
               }
            ]
         },
         {
            "c":[
               {
                  "v":21.0,
                  "f":"21"
               },
               {
                  "v":"PRL y MA"
               },
               {
                  "v":"Manipulador de alimentos"
               }
            ]
         },
         {
            "c":[
               {
                  "v":22.0,
                  "f":"22"
               },
               {
                  "v":"PRL y MA"
               },
               {
                  "v":"Prevención de Riesgos Laborales"
               }
            ]
         }
      ]
   }
});

下面的代码是我用来保存数组中的JSON(以前从URL读取)并绕过来向我显示数据行。

var data = httpRequest.responseText;
arrayDatos = data.split('{"c":');

for(var i = 1 ; i < arrayDatos.length; i++)
{
    document.getElementById("body").innerHTML +=  arrayDatos[i] + '<br/>';
}

1 个答案:

答案 0 :(得分:1)

哦,上帝,JSON上的字符串操作?您可能不知道,JSON是JavaScript Object Notation的首字母缩写。所以基本上你已经获得了Javascript对象的String表示,而不是将它转换回它代表你选择使用String操作来处理它的本机对象。那么它会起作用,但它也会效率低下,维护起来也很困难。

所以这是一个理智的替代方法,使用JSON.parse(data)从JSON表示中恢复对象:

var objectData = JSON.parse(data);
var rowsArray = objectData.table.rows;
for(var i = 0 ; i < rowsArray.length; i++) {
    var currentRow = rowsArray[i]
    var cellArray = currentRow.c;
    for (var j = 0; j < cellArray.length; j++) {
        var currentCell = cellArray[j];
        document.getElementById("body").innerHTML += currentCell.v + '<br/>';
    }
}

还要注意每行如何有一个单元格数组。虽然你的问题充其量是隐含的,但我认为这可能是你的问题,因为你的代码目前在单元格数组中分裂。