如何将JSON对象添加到另一个JSON文件中的数组

How to add JSON objects to an array in another JSON file

本文关键字：JSON 文件 数组 另一个 添加 对象      更新时间：2023-09-26

我有一个JSON文件:

var info = [{ "place": "Turkey", "username": "jhon" }, { "place": "Dubai", "username": "bruce" }, { "place": "Italy", "username": "Wayne" }];

我有一个HTML形式为:

<!DOCTYPE html>
<html>
    <body>
<form onsubmit="addToJSON();">
First name:<br>
<input type="text" id="place">
<br>
Last name:<br>
<input type="text" id="username">
<br><br>
<input type="submit" value="Submit">
</form> 
<script src="data.json"></script>
<script>
function addToJSON(){
    alert("inside JS");
    var x = document.getElementById('place').value;
    var y = document.getElementById('username').value;
    var obj = {
    place: x,
    username: y
};
localStorage.setItem("info",JSON.stringify(obj));
}
</script>
</body>
</html>

我试图获得用户在表单中输入的值，并将它们添加到我拥有的JSON变量中。但是我在某个地方出错了。非常感谢帮助!因此，如果用户在表单中输入wayne和india，我的JSON数组必须添加这两个对象。另外，它们应该反映在文件中。

不可能从浏览器端JavaScript写入任意文件或url。

您需要在HTTP请求中捆绑数据(使用XMLHttpRequest或只是摆脱JavaScript并正常提交表单)，将其发送到HTTP服务器，然后使用服务器端程序(用您选择的编程语言编写，可以是JavaScript通过Node.JS)编辑文件。

(在服务器上编辑文件通常是一个坏主意，使用数据库通常是更好的选择)

你可以这样做

<!DOCTYPE html>
<html>
    <body>
<form onsubmit="addToJSON();">
First name:<br>
<input type="text" id="place">
<br>
Last name:<br>
<input type="text" id="username">
<br><br>
<input type="submit" value="Submit">
</form> 
<script src="data.json"></script>
<script>
if(!localStorage.getItem('info'))
    localStorage.setItem("info",JSON.stringify(info));
else
    info = JSON.parse(localStorage.getItem("info"));
function addToJSON(){
    alert("inside JS");
    var x = document.getElementById('place').value;
    var y = document.getElementById('username').value;
    var obj = {
    place: x,
    username: y
    };
    info.push(obj);
    localStorage.setItem("info",JSON.stringify(info));
}
</script>
</body>
</html>
相关文章：