Question

我在json文件中有一个数据，如下所示：

{"NAME": "name1", "value1":5, "value2":4, "value3":9}
{"NAME": "name2", "value1":3, "value2":8, "value3":2}
{"NAME": "name3", "value1":5, "value2":8, "value3":2}

我喜欢将这些数据加载到3个javascript数组中并以这种方式在webiste上显示：

表1：

NAME   value1
name1  5
name2  3
name3  5

表2：

NAME   value2
name1  4
name2  8
name3  8

使用js / jquery的最佳方法是什么？我想这是一件容易的事，但我是js / jquery的初学者，我仍然遇到基本问题。提前致谢

Answer 1

首先，您必须确保JSON代码有效。

var data = '{"NAME": "name1", "value1":5, "value2":4, "value3":9}';
data = JSON.parse(data); //Parse JSON to access data values
document.write(data.Name);// prints -> name1
document.write(data.value); // prints -> 5
document.write(data.value2); // prints -> 4

因为你有3个独立的json数组，你需要确保它们在一个看起来像这样的数组中

data = ['{"NAME": "name1", "value1":5, "value2":4, "value3":9}','{"NAME": "name1", "value1":5, "value2":4, "value3":9}','{"NAME": "name1", "value1":5, "value2":4, "value3":9}']

现在解析数组。

data = JSON.parse(data);
document.write(data[0].NAME)// Prints first json array NAME value
document.write(data[1].NAME)// Print second json array NAME value

Answer 2

Fiddle here for you

创建列表。遍历列表并创建新对象。迭代新列表并创建HTML。放入div容器。

var list = [
    {"NAME": "name1", "value1":5, "value2":4, "value3":9}
    {"NAME": "name2", "value1":3, "value2":8, "value3":2}
    {"NAME": "name3", "value1":5, "value2":8, "value3":2}
];

var table1, table2, table3;
var newList = [];

$.each(list, function(index, val) {
    table1 = {
       name: val.NAME,
       value: val.value1
    }

    table2 = {
      name: val.NAME,
      value: val.value2
    };

    table3 = {
      name: val.NAME,
      value: val.value3
    }

    createdList.push(table1);
    createdList.push(table2);
    createdList.push(table3);
});

var createdTable;
$.each(table1, function(index, val) {
    createdTable += '<tr><td>' + val.name + '</td>';
    createdTable += '<td>' + val.value + '</td></tr>';
});

// do the same for the others
$('#someID').html('<table>' + createdTable + '</table>');

Answer 3

var arr1='[{"NAME": "name1", "value1":5, "value2":4, "value3":9}]';
var arr2='[{"NAME": "name2", "value1":3, "value2":8, "value3":2}]';
var arr3='[{"NAME": "name3", "value1":5, "value2":8, "value3":2}]';
    var html='<table><tr><th width="100">NAME</th><th width="100">Value1</th><th width="100">Value2</th><th width="100">Value3</th></tr>'; 
    $.each(JSON.parse(arr1), function(idx, obj) {
        html += '<tr><td width="100">' + obj.NAME + '</td>';
        html += '<td width="100">' + obj.value1 + '</td>';  
        html += '<td width="100">' + obj.value2 + '</td>';  
        html += '<td width="100">' + obj.value3 + '</td></tr>'; 
    });
    $.each(JSON.parse(arr2), function(idx, obj) {
        html += '<tr><td width="100">' + obj.NAME + '</td>';
        html += '<td width="100">' + obj.value1 + '</td>';  
        html += '<td width="100">' + obj.value2 + '</td>';  
        html += '<td width="100">' + obj.value3 + '</td></tr>'; 
    });
    $.each(JSON.parse(arr3), function(idx, obj) {
        html += '<tr><td width="100">' + obj.NAME + '</td>';
        html += '<td width="100">' + obj.value1 + '</td>';  
        html += '<td width="100">' + obj.value2 + '</td>';  
        html += '<td width="100">' + obj.value3 + '</td></tr>'; 
    });
    html+='</table>'
    $('body').append(html);

可以在 fiddle

中找到它

Answer 4

您可以在对象上使用Object.keys（obj），然后通过它进行映射，并将该键上的元素分配给k索引处的数组。

var o = {"NAME": "name1", "value1":5, "value2":4, "value3":9};

var arr = [];
Object.keys(o).map(function(k) { arr[k] = o[k]; });

http://jsfiddle.net/1678es42/

从json到javascript数组加载属性

4 个答案: