Question

我想从JSON文件中获取值并插入到html中。

基于这个JSON数组我试图使用jquery和创建页面将数据插入到html标签：

 $.getJSON( "/general.json", function( data ) {

var jarray = data;
for(i = 0; i <=jarray.length; i++){
  var project  = jarray[i].project;
  var fulltime = jarray[i].bars.fulltime.resource;
  var contractor = jarray[i].bars.contractor.resource;
  var vendor = jarray[i].bars.vendor.resource;
  var capacity = jarray[i].bars.contractor.resource;
  var dept = jarray[i].department;

  jarray.push('<div class = "projects" >');
  jarray.push('<div class = "project" >');
  jarray.push('<div class = "label" >"'+ project+'"</div>');
  jarray.push('<div class = "progress" >');
  jarray.push('<span class = "'+ fulltime +'" ></span>');
  jarray.push('<span class = "'+ contractor +'" ></span>');
  jarray.push('<span class = "'+ vendor +'" ></span>');
  jarray.push('<span class = "'+ capacity +'" ></span>');
  jarray.push('</div>');  
  jarray.push('</div>');  
  jarray.push('</div>');

}

  $('.projects').html(jarray.join('')).appendTo(".department_other  > h2");

}）; 但因为数组是复杂的不能访问理想的值。感谢任何建议，谢谢。

Answer 1

您可以使用val.bars.fulltime.resource或data[ i ].bars.fulltime.resource来循环访问它们。

Answer 2

使用下划线（http://underscorejs.org/）或lodash（http://lodash.com/）结帐。您可以使用uderscore的.pluck方法轻松获取JSON对象中的元素...

Answer 3

首先：为你的JSON孩子和父亲命名，我已经更正了你的JSON，但是我会给你一个提示，使用这个网站http://json.parser.online.fr/来操纵JSON并看看它是怎么回事。

第二：永远不要像使用{"0":{}}，{"1":{}}等那样使用子名作为数字。总是使用名称，或者不使用任何东西，就像我一样，所以你可以直接访问，否则你不能。

第三：确切地说，在创建JSON之前，先考虑一下你想要什么，然后分组，分组。

var j = {
            "jsonArray":[
              {
                      "project": "x2 Mobile",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 2
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 1
                          }
                      },
                      "project": "x2 PC/Web",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 1
                          }
                      },
                      "project": "x2 Global/STB",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 11
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 3
                          }
                      },
                      "project": "x3 Mobile/Apps",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 2
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 2
                          }
                      },

                  "department": "Herrin"
              },
              {
                      "project": "App Icon Strategy",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          }
                      },
                  "department": "Herrin/Other"
              },
              {
                      "project": "Packaging",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          }
                      },
                      "project": "Customer Journey",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 1
                          },
                          "vendor": {
                              "resource": "progress-bar green",
                              "amount": 5
                          }
                      },
                  "department": "Other"
              }
          ]
};

现在您可以通过（例如，假设i=0）：

来访问它

for(i=0;i<5;i++){
  var project  = j.jsonArray[i].project;
  var fulltime = j.jsonArray[i].bars.fulltime;
  var resource = j.jsonArray[i].bars.contractor.resource;
}

使用jQuery访问多维JSON数组中的值

3 个答案: