如何使用Javascript / jQuery在其他JSON数据之后正确添加JSON数据

2024年1月1日 163次阅读

我在一年前开始编程,而且我是
Javascript / jQuery语言的新手.我目前正在做一个Web开发者的实习,我必须使用JSON文件.

我使用的JSON文件以这种方式呈现：

{"sessions": [{"waves": [{"moments": [{ "lat": 43.522182,  "lon": -1.5024,"type": "Z"},{"lat": 43.522182,"lon": -1.5024,"type": "T"},{"lat": 43.522182,"lon": -1.5024,"type": "R"},{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.522182, "lon": -1.5024,  "type": "Z"},{ "lat": 43.522182,"lon": -1.5024,"type": "R"}, { "lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.522182,"lon": -1.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "09:46:34","lat": 43.522186,"lon": -1.5024,"level": 0, "distance": 0,"speed": 0.03,"duration": 23.94},{"moments": [{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "T"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.522182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "10:32:10","lat": 43.822186, "lon": -4.5024,"level": 2,"distance": 60,"speed": 0.53,"duration": 20.01},{"moments": [{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "T"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.522182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "10:32:10","lat": 43.822186, "lon": -4.5024,"level": 6,"distance": 50,"speed": 1.5,"duration": 25}]}],"date": "05/03/18","time": "09:46:34","lat": 43.522197,"lon": -1.502392,"duration": 5425}

这给我们这样的东西：well structured json file

这个json文件包含1个冲浪会话.每个冲浪会议由你在会议期间拍摄的几个波浪组成,每个波浪都以瞬间为特征.

我的实习目标之一是创建一种历史json文件,其中将存储每个人的会话.因此,每次用户在我工作的网站上上传会话json文件时,该新文件的内容将添加到历史文件的以下内容中.

以下是包含2个会话的历史json文件的示例：

{"sessions":[{"waves":[{"moments":[{"lat":1,"lon":-1,"type":"Z"},{"lat":2,"lon":-2,"type":"T"},{"lat":3,"lon":-3,"type":"R"},{"lat":4,"lon":-4,"type":"Z"},{"lat":5,"lon":-5,"type":"Z"},{"lat":6,"lon":-6,"type":"R"},{"lat":7,"lon":-7,"type":"Z"},{"lat":8,"lon":-8,"type":"Z"}],"direction":"left","date":"05/03/18","time":"09:46:34","lat":43.522186,"lon":-1.5024,"level":0,"distance":0,"speed":2,"duration":23.94},{"moments":[{"lat":9,"lon":-9,"type":"Z"},{"lat":10,"lon":-10,"type":"T"},{"lat":11,"lon":-11,"type":"R"},{"lat":12,"lon":-12,"type":"Z"},{"lat":13,"lon":-13,"type":"Z"},{"lat":14,"lon":-14,"type":"R"},{"lat":15,"lon":-15,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":1,"distance":5,"speed":3,"duration":12},{"moments":[{"lat":16,"lon":-16,"type":"Z"},{"lat":17,"lon":-17,"type":"T"},{"lat":18,"lon":-18,"type":"R"},{"lat":19,"lon":-19,"type":"Z"},{"lat":20,"lon":-20,"type":"Z"},{"lat":21,"lon":-21,"type":"R"},{"lat":22,"lon":-22,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":6,"distance":10,"speed":1,"duration":50},{"moments":[{"lat":23,"lon":-23,"type":"Z"},{"lat":24,"lon":-24,"type":"T"},{"lat":25,"lon":-25,"type":"R"},{"lat":26,"lon":-26,"type":"Z"},{"lat":27,"lon":-27,"type":"Z"},{"lat":28,"lon":-28,"type":"R"},{"lat":29,"lon":-29,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":2,"distance":60,"speed":30,"duration":10},{"moments":[{"lat":30,"lon":-30,"type":"Z"},{"lat":31,"lon":-31,"type":"T"},{"lat":32,"lon":-32,"type":"R"},{"lat":33,"lon":-33,"type":"Z"},{"lat":34,"lon":-34,"type":"Z"},{"lat":35,"lon":-35,"type":"R"},{"lat":36,"lon":-36,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":4,"distance":24,"speed":50,"duration":30}]},{"waves":[{"moments":[{"lat":1,"lon":-1,"type":"Z"},{"lat":2,"lon":-2,"type":"T"},{"lat":3,"lon":-3,"type":"R"},{"lat":4,"lon":-4,"type":"Z"},{"lat":5,"lon":-5,"type":"Z"},{"lat":6,"lon":-6,"type":"R"},{"lat":7,"lon":-7,"type":"Z"},{"lat":8,"lon":-8,"type":"Z"}],"direction":"left","date":"05/03/18","time":"09:46:34","lat":43.522186,"lon":-1.5024,"level":0,"distance":0,"speed":2,"duration":23.94},{"moments":[{"lat":9,"lon":-9,"type":"Z"},{"lat":10,"lon":-10,"type":"T"},{"lat":11,"lon":-11,"type":"R"},{"lat":12,"lon":-12,"type":"Z"},{"lat":13,"lon":-13,"type":"Z"},{"lat":14,"lon":-14,"type":"R"},{"lat":15,"lon":-15,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":1,"distance":5,"speed":3,"duration":12},{"moments":[{"lat":16,"lon":-16,"type":"Z"},{"lat":17,"lon":-17,"type":"T"},{"lat":18,"lon":-18,"type":"R"},{"lat":19,"lon":-19,"type":"Z"},{"lat":20,"lon":-20,"type":"Z"},{"lat":21,"lon":-21,"type":"R"},{"lat":22,"lon":-22,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":6,"distance":10,"speed":1,"duration":50},{"moments":[{"lat":23,"lon":-23,"type":"Z"},{"lat":24,"lon":-24,"type":"T"},{"lat":25,"lon":-25,"type":"R"},{"lat":26,"lon":-26,"type":"Z"},{"lat":27,"lon":-27,"type":"Z"},{"lat":28,"lon":-28,"type":"R"},{"lat":29,"lon":-29,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":2,"distance":60,"speed":30,"duration":10},{"moments":[{"lat":30,"lon":-30,"type":"Z"},{"lat":31,"lon":-31,"type":"T"},{"lat":32,"lon":-32,"type":"R"},{"lat":33,"lon":-33,"type":"Z"},{"lat":34,"lon":-34,"type":"Z"},{"lat":35,"lon":-35,"type":"R"},{"lat":36,"lon":-36,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":4,"distance":24,"speed":50,"duration":30}]}],"date":"05/03/18","time":"09:46:34","lat":43.522197,"lon":-1.502392,"duration":3012}

我会给你这个：Expected history json file

我已经尝试了很多东西几天,特别是把我的对象变成数组,然后使用push方法然后再将数组返回到对象中,我得到的最接近的点是：

function toObject(arr) {     //Allows to turn an array into an object
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}

Object.size = function(obj) {     //Return the size of the object
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

var array=[];

//obj is my new session I want to add in obj2

var obj = {"sessions": [{"waves": [{"moments": [{ "lat": 43.522182,  "lon": -1.5024,"type": "Z"},{"lat": 43.522182,"lon": -1.5024,"type": "T"},{"lat": 43.522182,"lon": -1.5024,"type": "R"},{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.522182, "lon": -1.5024,  "type": "Z"},{ "lat": 43.522182,"lon": -1.5024,"type": "R"}, { "lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.522182,"lon": -1.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "09:46:34","lat": 43.522186,"lon": -1.5024,"level": 0, "distance": 0,"speed": 0.03,"duration": 23.94},{"moments": [{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "T"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.522182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "10:32:10","lat": 43.822186, "lon": -4.5024,"level": 2,"distance": 60,"speed": 0.53,"duration": 20.01},{"moments": [{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "T"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.522182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "10:32:10","lat": 43.822186, "lon": -4.5024,"level": 6,"distance": 50,"speed": 1.5,"duration": 25}]}],"date": "05/03/18","time": "09:46:34","lat": 43.522197,"lon": -1.502392,"duration": 5425};

array.push(obj);
myJSON = toObject(array);
var myJSON = JSON.stringify(myJSON);
document.getElementById("demo").innerHTML = myJSON;  



//obj 2 is my history file that already contains 1 session
var obj2 = {"sessions":[{"waves":[{"moments":[{"lat":1,"lon":-1,"type":"Z"},{"lat":2,"lon":-2,"type":"T"},{"lat":3,"lon":-3,"type":"R"},{"lat":4,"lon":-4,"type":"Z"},{"lat":5,"lon":-5,"type":"Z"},{"lat":6,"lon":-6,"type":"R"},{"lat":7,"lon":-7,"type":"Z"},{"lat":8,"lon":-8,"type":"Z"}],"direction":"left","date":"05/03/18","time":"09:46:34","lat":43.522186,"lon":-1.5024,"level":0,"distance":0,"speed":2,"duration":23.94},{"moments":[{"lat":9,"lon":-9,"type":"Z"},{"lat":10,"lon":-10,"type":"T"},{"lat":11,"lon":-11,"type":"R"},{"lat":12,"lon":-12,"type":"Z"},{"lat":13,"lon":-13,"type":"Z"},{"lat":14,"lon":-14,"type":"R"},{"lat":15,"lon":-15,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":1,"distance":5,"speed":3,"duration":12},{"moments":[{"lat":16,"lon":-16,"type":"Z"},{"lat":17,"lon":-17,"type":"T"},{"lat":18,"lon":-18,"type":"R"},{"lat":19,"lon":-19,"type":"Z"},{"lat":20,"lon":-20,"type":"Z"},{"lat":21,"lon":-21,"type":"R"},{"lat":22,"lon":-22,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":6,"distance":10,"speed":1,"duration":50},{"moments":[{"lat":23,"lon":-23,"type":"Z"},{"lat":24,"lon":-24,"type":"T"},{"lat":25,"lon":-25,"type":"R"},{"lat":26,"lon":-26,"type":"Z"},{"lat":27,"lon":-27,"type":"Z"},{"lat":28,"lon":-28,"type":"R"},{"lat":29,"lon":-29,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":2,"distance":60,"speed":30,"duration":10},{"moments":[{"lat":30,"lon":-30,"type":"Z"},{"lat":31,"lon":-31,"type":"T"},{"lat":32,"lon":-32,"type":"R"},{"lat":33,"lon":-33,"type":"Z"},{"lat":34,"lon":-34,"type":"Z"},{"lat":35,"lon":-35,"type":"R"},{"lat":36,"lon":-36,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":4,"distance":24,"speed":50,"duration":30}]}],"date":"05/03/18","time":"09:46:34","lat":43.522197,"lon":-1.502392,"duration":3012};


var size = Object.size(obj2.sessions);
console.log(size);


array.push(obj2);
myJSON = toObject(array);
myJSON = JSON.stringify(myJSON);
document.getElementById("demo2").innerHTML = myJSON;

<!DOCTYPE html>
<html>
<body>

<h2>Create JSON string from a JavaScript object.</h2>

<p id="demo"></p>
<p id="demo2"></p>

</body>
</html>

但它给了我这个：My code result

那么有人知道如何获得预期的历史json文件吗？ (图2)
如果我的解释不足以理解我所寻找的内容,请随时告诉我.
谢谢

最佳答案您必须将代码更改为以下内容

Size.forEach(function(I,index){

Obj.sessions.push(index);}

现在您正在尝试将2会话数组与主数组合并

通过使用array.push,您将使用新会话添加旧会话,它将反映所显示的图像文件中的两个会话

正确答案反映图像

function toObject(arr) {     //Allows to turn an array into an object
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}

Object.size = function(obj) {     //Return the size of the object
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

var array=[];

//obj is my new session I want to add in obj2

var obj = {"sessions": [{"waves": [{"moments": [{ "lat": 43.522182,  "lon": -1.5024,"type": "Z"},{"lat": 43.522182,"lon": -1.5024,"type": "T"},{"lat": 43.522182,"lon": -1.5024,"type": "R"},{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.522182, "lon": -1.5024,  "type": "Z"},{ "lat": 43.522182,"lon": -1.5024,"type": "R"}, { "lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.522182,"lon": -1.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "09:46:34","lat": 43.522186,"lon": -1.5024,"level": 0, "distance": 0,"speed": 0.03,"duration": 23.94},{"moments": [{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "T"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.522182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "10:32:10","lat": 43.822186, "lon": -4.5024,"level": 2,"distance": 60,"speed": 0.53,"duration": 20.01},{"moments": [{"lat": 43.522182,"lon": -1.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "T"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.522182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"},{"lat": 43.822182,"lon": -4.5024,"type": "R"},{"lat": 43.822182,"lon": -4.5024,"type": "Z"}],"direction": "left","date": "05/03/18","time": "10:32:10","lat": 43.822186, "lon": -4.5024,"level": 6,"distance": 50,"speed": 1.5,"duration": 25}]}],"date": "05/03/18","time": "09:46:34","lat": 43.522197,"lon": -1.502392,"duration": 5425};

array.push(obj);
myJSON = toObject(array);
var myJSON = JSON.stringify(myJSON);
document.getElementById("demo").innerHTML = myJSON;  



//obj 2 is my history file that already contains 1 session
var obj2 = {"sessions":[{"waves":[{"moments":[{"lat":1,"lon":-1,"type":"Z"},{"lat":2,"lon":-2,"type":"T"},{"lat":3,"lon":-3,"type":"R"},{"lat":4,"lon":-4,"type":"Z"},{"lat":5,"lon":-5,"type":"Z"},{"lat":6,"lon":-6,"type":"R"},{"lat":7,"lon":-7,"type":"Z"},{"lat":8,"lon":-8,"type":"Z"}],"direction":"left","date":"05/03/18","time":"09:46:34","lat":43.522186,"lon":-1.5024,"level":0,"distance":0,"speed":2,"duration":23.94},{"moments":[{"lat":9,"lon":-9,"type":"Z"},{"lat":10,"lon":-10,"type":"T"},{"lat":11,"lon":-11,"type":"R"},{"lat":12,"lon":-12,"type":"Z"},{"lat":13,"lon":-13,"type":"Z"},{"lat":14,"lon":-14,"type":"R"},{"lat":15,"lon":-15,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":1,"distance":5,"speed":3,"duration":12},{"moments":[{"lat":16,"lon":-16,"type":"Z"},{"lat":17,"lon":-17,"type":"T"},{"lat":18,"lon":-18,"type":"R"},{"lat":19,"lon":-19,"type":"Z"},{"lat":20,"lon":-20,"type":"Z"},{"lat":21,"lon":-21,"type":"R"},{"lat":22,"lon":-22,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":6,"distance":10,"speed":1,"duration":50},{"moments":[{"lat":23,"lon":-23,"type":"Z"},{"lat":24,"lon":-24,"type":"T"},{"lat":25,"lon":-25,"type":"R"},{"lat":26,"lon":-26,"type":"Z"},{"lat":27,"lon":-27,"type":"Z"},{"lat":28,"lon":-28,"type":"R"},{"lat":29,"lon":-29,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":2,"distance":60,"speed":30,"duration":10},{"moments":[{"lat":30,"lon":-30,"type":"Z"},{"lat":31,"lon":-31,"type":"T"},{"lat":32,"lon":-32,"type":"R"},{"lat":33,"lon":-33,"type":"Z"},{"lat":34,"lon":-34,"type":"Z"},{"lat":35,"lon":-35,"type":"R"},{"lat":36,"lon":-36,"type":"Z"}],"direction":"left","date":"05/03/18","time":"10:32:10","lat":43.822186,"lon":-4.5024,"level":4,"distance":24,"speed":50,"duration":30}]}],"date":"05/03/18","time":"09:46:34","lat":43.522197,"lon":-1.502392,"duration":3012};

//clear array since array already contains the obj 
var array = [] ;
var size = Object.size(obj2.sessions);
console.log(size);

//now add the waves to obj2 in order to format as required
obj.sessions.forEach(function(index,object){ 
obj2.sessions.push(object);
}

array.push(obj2);
myJSON = toObject(array);
myJSON = JSON.stringify(myJSON);
document.getElementById("demo2").innerHTML = myJSON;

添加plunker链接https://plnkr.co/edit/UNWbyDlifsJepNXXcQMI