如何使用javascript在json对象中添加子节点?

时间:2018-01-29 13:35:07

标签: javascript jquery json

我正在动态构建JSON文件。我想在JSON对象中添加一个JSON数组。 JSON看起来像 -

{"name":"Root",
  "children":[
   {"name":"child1"},
   {"name":"child2"}
  ]}

现在,我想添加 -

[{"name":"child11"},{"name":"child12"}]

在" child1"宾语。怎么做?我还尝试在创建原始JSON对象时保留空白子对象,但JSON解析器不会阻止这些空子对象。在当前场景中,当我使用push()函数添加新子时,它会抛出异常。任何帮助深表感谢。 在此先感谢!!

编辑1:我认为我没有让自己足够清楚。我在发布这个问题之前已经研究过SO,我想这不是一个重复的问题。我的目标JSON是 -



{
  "name": "Root",
  "children": [{
      "name": "child1",
	  "children": [{
		{"name": "child11"},
		{"name": "child12"}
	  }]
    },
    {
      "name": "child2",
	  "children": [{
		{"name": "child21"},
		{"name": "child22"}
	  }]
    }
  ]
};




以下是我尝试运行的代码段 -



flare = {
  "name": "Root",
  "children": [{
      "name": "child1",
	  "children": [{
		{"name": "child11"},
		{"name": "child12"}
	  }]
    },
    {
      "name": "child2",
	  "children": [{
		{"name": "child21"},
		{"name": "child22"}
	  }]
    }
  ]
};
var updatedJson = twoLevelSelection(flare);
function twoLevelSelection(json){
	var root = flare.name;
	var string_json = '';
	string_json = '{"name": "'+root+'","children": [';
	flare.children.forEach(
	function(d){
		string_json = string_json+ '{"name":"'+d.name+'","children":[]},';
	}
	);
	string_json = string_json.substring(0,string_json.length-1);
	string_json = string_json + ']}';
	return JSON.parse(string_json);
}
// data is the original data.i.e - flare
// d is the clicked node, under which children to be added
function traverse(data,d){
var queue = [];
var next = data;
while(next){
	if(next.children){
		next.children.forEach(
		function(k){
			queue.push(k);
		}
		)
	}
	if(queue[0].name==d.name){
		alert(queue[0].children);
		//d.children = queue[0].children;
		var child_string='';
		var child_array = [];
		queue[0].children.forEach(
		function(j){
			child_string = '{"name": "'+j.name+'"}';
			child_array.push(child_string);
		}
		);
		console.log(child_array);
		d.children = [...child_array];
		console.log(updatedJson);
		//update(updatedJson);
		break;
	}else{
		next= queue.shift();
	}
}
}



 将在click事件上调用traverse()。 对不起,因为没有提供第一名的清晰度。谢谢!

1 个答案:

答案 0 :(得分:1)

您可以使用Spread Operator来完成此任务。

此代码段有一个名为addElements的函数,它可以找到目标并将新元素添加到children数组中。

var obj = {
  "name": "Root",
  "children": [{
      "name": "child1"
    },
    {
      "name": "child2"
    }
  ]
};


var newArray = [
   { "name": "child11"}, 
   { "name": "child12"}
];

var addElements = function(target, array) {
  obj.children.forEach(function(child) {
    if (child.name === target) {
      child['children'] = [...(child['children'] || []), ...newArray];
      return;
    }
  });
};

addElements('child1', newArray);


console.log(obj);

请参阅?现在,您的obj.childre[0].children数组包含新元素。