我从我的数据库中获取json并将其解析为和数组，并使输入字段位于数组之外，以便用户可以编辑输入字段。哪种方法工作正常，但我却很难制作一个函数来读取所有输入字段的值，然后再次将它们保存在这样的数组中：
0: {Jaar: "2016-2017", Stadsdeel (7): "Centrum", %: "31,2", n: 144, N: 461, …}
1: {Jaar: "2016-2017", Stadsdeel (7): "West", %: "38,4", n: 371, N: 966, …}
2: {Jaar: "2016-2017", Stadsdeel (7): "Nieuw-West", %: "31,5", n: 505, N: 1605, …}
3: {Jaar: "2016-2017", Stadsdeel (7): "Zuid", %: "34,5", n: 325, N: 943, …}
4: {Jaar: "2016-2017", Stadsdeel (7): "Oost", %: "35,9", n: 529, N: 1475, …}
5: {Jaar: "2016-2017", Stadsdeel (7): "Noord", %: "36,5", n: 374, N: 1024, …}
6: {Jaar: "2016-2017", Stadsdeel (7): "Zuidoost", %: "40,7", n: 361, N: 886, …}
7: {Jaar: "2016-2017", Stadsdeel (7): "Totaal", %: "35,4", n: 2608, N: 7359, …}
8: {Jaar: null}
所以我可以JSON.stringify()数组并将其放入数据库中，到目前为止，我一直在尝试构建类似的函数，而这正是我所想的
function update() {
console.log(Object.keys(data[1]));
for(let i = 0; i < data.length; ++i){
let names_length = Object.keys(data[i]);
let main_obj = {};
for(let j = 0; j < names_length.length; ++j) {
let a = document.getElementById('start' + names_length[j]).value;
let b = document.getElementById(i + names_length[j]).value;
console.log(b);
console.log(a);
var obj = {key : b};
obj[a] = obj['key'];
delete obj['key'];
console.log(obj);
}
}
}
但是问题是该函数使小对象产生，但是我想再次使像这样的大对象{Jaar: "2016-2017", Stadsdeel (7): "Totaal", %: "35,4", n: 2608, N: 7359, …}而不是函数生成此输出{Stadsdeel (7): "Centrum"}，该输出最终会在数组中的所有小对象中产生所以数组看起来像这样：[[{}{}{}],[{}{}{}],[{}{}{}]]而不是这样：[{},{},{}]我真的很难想到一个function，在这种情况下可以解决我的问题，如果它在javascript or jquery
var data;
var names;
var json_object = [];
init();
function init() {
var json_data = '{{$metric->data_json_version}}';
let json_data_replaced = json_data.replace(/"/g, '"');
try {
data = JSON.parse(json_data_replaced);
displayData();
} catch (error) {
console.error(error);
}
}
function displayData() {
console.log(data);
for(let i = 0; i < data.length; ++i){
names = Object.keys(data[i]);
for(let j = 0; j < names.length; ++j){
let vw = 90 / names.length;
let a = document.createElement("input");
let c = document.createElement("input");
let b = names[j];
c.setAttribute('type', 'text');
c.style.width = vw + 'vw';
c.setAttribute('value', names[j]);
c.setAttribute('id', 'start' + names[j]);
c.readOnly = true;
a.setAttribute('type', 'text');
a.style.width = vw + 'vw';
a.setAttribute('id', i + names[j]);
a.setAttribute('value', data[i][b]);
if(i === 0){document.getElementById("labels_for_data").appendChild(c);}
document.getElementById("data_preview_metric").appendChild(a);
if((j + 1) === (names.length)){
let br = document.createElement("br");
let next_sib = a.nextSibling;
if (next_sib) { document.getElementById('data_preview_metric').insertBefore(br, next_sib); }
else { document.getElementById('data_preview_metric').appendChild(br); }
}
}
}
}
由javascript生成的html：
<div id="labels_for_data">
<br>
<input type="text" value="Jaar" id="startJaar" readonly="" style="width: 15vw;">
<input type="text" value="Stadsdeel (7)" id="startStadsdeel (7)" readonly="" style="width: 15vw;">
<input type="text" value="%" id="start%" readonly="" style="width: 15vw;">
<input type="text" value="n" id="startn" readonly="" style="width: 15vw;">
<input type="text" value="N" id="startN" readonly="" style="width: 15vw;">
<input type="text" value="" id="start" readonly="" style="width: 15vw;"></div>
<div id="data_preview_metric">
<input type="text" id="0Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="0Stadsdeel (7)" value="Centrum" style="width: 15vw;">
<input type="text" id="0%" value="31,2" style="width: 15vw;">
<input type="text" id="0n" value="144" style="width: 15vw;">
<input type="text" id="0N" value="461" style="width: 15vw;">
<input type="text" id="0" value="null" style="width: 15vw;"><br>
<input type="text" id="1Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="1Stadsdeel (7)" value="West" style="width: 15vw;">
<input type="text" id="1%" value="38,4" style="width: 15vw;">
<input type="text" id="1n" value="371" style="width: 15vw;">
<input type="text" id="1N" value="966" style="width: 15vw;">
<input type="text" id="1" value="null" style="width: 15vw;"><br>
<input type="text" id="2Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="2Stadsdeel (7)" value="Nieuw-West" style="width: 15vw;">
<input type="text" id="2%" value="31,5" style="width: 15vw;">
<input type="text" id="2n" value="505" style="width: 15vw;">
<input type="text" id="2N" value="1605" style="width: 15vw;">
<input type="text" id="2" value="null" style="width: 15vw;"><br>
<input type="text" id="3Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="3Stadsdeel (7)" value="Zuid" style="width: 15vw;">
<input type="text" id="3%" value="34,5" style="width: 15vw;">
<input type="text" id="3n" value="325" style="width: 15vw;">
<input type="text" id="3N" value="943" style="width: 15vw;">
<input type="text" id="3" value="null" style="width: 15vw;"><br>
<input type="text" id="4Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="4Stadsdeel (7)" value="Oost" style="width: 15vw;">
<input type="text" id="4%" value="35,9" style="width: 15vw;">
<input type="text" id="4n" value="529" style="width: 15vw;">
<input type="text" id="4N" value="1475" style="width: 15vw;">
<input type="text" id="4" value="null" style="width: 15vw;"><br>
<input type="text" id="5Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="5Stadsdeel (7)" value="Noord" style="width: 15vw;">
<input type="text" id="5%" value="36,5" style="width: 15vw;">
<input type="text" id="5n" value="374" style="width: 15vw;">
<input type="text" id="5N" value="1024" style="width: 15vw;">
<input type="text" id="5" value="null" style="width: 15vw;"><br>
<input type="text" id="6Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="6Stadsdeel (7)" value="Zuidoost" style="width: 15vw;">
<input type="text" id="6%" value="40,7" style="width: 15vw;">
<input type="text" id="6n" value="361" style="width: 15vw;">
<input type="text" id="6N" value="886" style="width: 15vw;">
<input type="text" id="6" value="null" style="width: 15vw;"><br>
<input type="text" id="7Jaar" value="2016-2017" style="width: 15vw;">
<input type="text" id="7Stadsdeel (7)" value="Totaal" style="width: 15vw;">
<input type="text" id="7%" value="35,4" style="width: 15vw;">
<input type="text" id="7n" value="2608" style="width: 15vw;">
<input type="text" id="7N" value="7359" style="width: 15vw;">
<input type="text" id="7" value="null" style="width: 15vw;"><br>
<input type="text" id="8Jaar" value="null" style="width: 90vw;"><br></div>
<button onclick="update()" type="button">Submit</button>