将数据从一个 json 对象动态添加到另一个
Posted
技术标签:
【中文标题】将数据从一个 json 对象动态添加到另一个【英文标题】：Adding data dynamically from one json object to another 【发布时间】：2012-06-20 04:10:21 【问题描述】：假设我有一个 json 对象朋友为：
title: Friends
link: /friends.json
description: "My friends"
people: [
id: "1",
name: "Matthew",
img: "img/matthew.jpg"
,
id: "2",
name:"Matt",
img: "img/matt.jpg"
,
id: "3",
name: "David",
img: "img/dav.jpg"
]
这被存储为文件friends.json
现在使用 javascript/jQuery，我需要创建一个新对象 good_friends.json 并需要使用“people.id”从 friends.json 的“people”字段向其添加值（动态和一对一） ”。我该怎么做？
【问题讨论】：
JSON 在几个方面是无效的。键需要用双引号括起来，所有其他字符串（例如Friends 和/friends.json）也是如此。请参阅json.org 和 jsonlint.com。
使用 JSON.parse 从您的 JSON 字符串中简单地创建 javascript 对象，并对您的对象进行基本的 javascript 操作。
我对 jQuery 和 json 还很陌生，所以对它们了解不多。我似乎想不出为什么我发布了这个问题。这可能有点愚蠢，但任何帮助将不胜感激。
【参考方案1】：
如果您想保存更改，您几乎需要一个服务器端进程。
您可以通过ajax 加载 JSON：
$.ajax(
url: "/path/to/friends.json",
dataType: "json",
success: function(data)
// Here, `data` will be the object resulting from deserializing the JSON
// Store `data` somewhere useful, perhaps you might have a `friends`
// variable declared somewhere; if so:
friends = data;
,
error: function()
// Handle the error
);
要添加到反序列化的对象，你只需在内存中修改它：
friends.people.push(
id: String(friends.people.length + 1),
name: "John",
img: "img/john.jpg"
);
当然，这些值可能来自输入字段或其他内容，例如：
function addPerson()
friends.people.push(
id: String(friends.people.length + 1),
name: $("#nameField").val(),
img: $("#imgField").val()
);
现在您有了数据的内存副本。要将其存储到某个地方，您必须有一个可以将其发布到的服务器端进程。您可能会在发布之前对其进行序列化，例如，通过JSON.stringify 或类似方式。如果您的浏览器本身没有JSON.stringify（大多数现代浏览器有，有些旧浏览器没有），您可以使用Crockford's。
或者，如果这只是供您自己使用，您可以在文本字段中显示字符串化结果，然后使用复制粘贴将其粘贴到文本编辑器中的friends.json。
这是一个完整的示例，它在文本区域中显示 JSON：Live copy | source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test Page</title>
<style>
body
font-family: sans-serif;
</style>
</head>
<body>
<label>Name:
<input type="text" id="nameField">
</label>
<br><label>Img:
<input type="text" id="imgField">
</label>
<br><input type="button" id="btnAdd" value="Add" disabled>
<input type="button" id="btnShow" value="Show JSON" disabled>
<br><div id="msg"> </div>
<hr>
<textarea id="showField" rows="10" cols="60"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
// Note that all of our script tags are at the end of the
// document. This lets the page load as quickly as possible
// and means we don't have to worry about whether the elements
// have been created yet (they have, because the scripts are
// below them).
// Put all of our code inside a function so we don't
// create globals
(function($)
if (typeof JSON === "undefined")
// Load Crockford's json2.js
// NOTE: You'd want to use your own copy, not a hotlink
// to his github like this.
var scr = document.createElement('script');
scr.src = "https://raw.github.com/douglascrockford/JSON-js/master/json2.js";
document.documentElement.appendChild(scr);
var friends; // Where our deserialized friends.json will go
// Focus the first field
$("#nameField").focus();
// Load the JSON
$.ajax(
url: "http://jsbin.com/ojexuz",
dataType: "json",
success: function(data)
// Here, `data` will be the object resulting from deserializing the JSON
// Store `data` somewhere useful, perhaps you might have a `friends`
// variable declared somewhere; if so:
friends = data;
// Enable our buttons now that we have data
$("input[type='button']").prop("disabled", "");
,
error: function()
// Handle the error
alert("Error loading friends.json");
);
// Handle clicks on the "Add" button
$("#btnAdd").click(function()
var nameField = $("#nameField"),
imgField = $("#imgField"),
name = $.trim(nameField.val()),
img = $.trim(imgField.val());
if (!name || !img)
alert("Please supply both name and image");
return;
addPerson(name, img);
$("#msg").text("Added '" + name + "'");
nameField.focus();
);
// An "add this person" function
function addPerson(name, img)
friends.people.push(
id: String(friends.people.length + 1),
name: name,
img: img
);
// Handle clicks on the "Show" button
$("#btnShow").click(function()
$("#showField").val(JSON.stringify(friends));
);
)(jQuery);
</script>
</body>
</html>
【讨论】：
做得很好，实时副本和代码对于任何查找 JSON/Ajax 示例的初学者都非常有用。 谢谢！这是很多有价值的信息......但是，我需要创建一个新的 json 对象并为其添加值。我该怎么做？ @VJ41：您可能不是指“JSON 对象”。您可能只是指“对象”。 （JSON 是一种用于交换数据的文本符号；一旦您与代码中的数据进行交互，您就不再使用 JSON，而只是使用对象。）要创建对象，您可以使用 object initializer、addPerson 中使用了上面的一个。例如，var o = foo: "bar"; 创建一个具有一个属性foo 的对象，其值为"bar"，并将该对象分配给变量o。
我需要将新数据发送到服务器进行进一步处理。我需要 json 对象吗？
@VJ41：通常您以名称/值对的形式向服务器发送数据。对于复杂的结构化数据，发送一个名称/值对，其中值是一个序列化为 JSON 的对象图，是一种很好的方法。以上是关于将数据从一个 json 对象动态添加到另一个的主要内容，如果未能解决你的问题，请参考以下文章
Extjs 7，如何使用视图模型将动态数据从一个控制器传递到另一个控制器
从android中的其他类动态地将对象添加到listview
如何将动态创建的 qmlcomponent 对象绑定到另一个动态创建的 qmlcomponent 对象的属性？