如何显示 JSON 字符串中的特定数据？答案

【问题标题】：How to display specific data from JSON string?如何显示 JSON 字符串中的特定数据？
【发布时间】：2016-05-25 13:19:59
【问题描述】：

我正在从 Google 电子表格 URL 检索 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/>';
}

【问题讨论】：

标签： javascript html json google-sheets

【解决方案1】：

天哪，JSON 上的字符串操作？您可能不知道，JSON 是 JavaScript Object Notation 的首字母缩写。因此，基本上您已经获得了 Javascript 对象的字符串表示形式，而不是将其转换回它所表示的本机对象，而是选择使用字符串操作来处理它。好吧，它会起作用，但它也会效率低下且难以维护。

所以这是一个明智的选择，使用 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/>';
    }
}

还要注意每一行如何有一个单元格数组。虽然您的问题充其量是隐含的，但我想这可能是您的问题，因为您的代码当前围绕单元格数组进行拆分。

【讨论】：