铸造数组和JSON介绍
前端将使用REST API与Angular等Typescript应用程序中的数据库进行交互。REST API是一个单独的应用程序，与数据库进行通信，可以用任何语言创建。REST API接受JSON作为输入并返回JSON作为输出。
基于MVC模式的Angular应用程序从视图层获取输入，并将它们存储/保存在控制器的对象数组中作为模型。
我们在Angular应用程序中有各种用例，如下所示。
-
添加/更新数据
用户在用户界面上输入数据，控制器将其作为一个数组的对象作为模型接收，这是一个输入的REST API。我们要`将这个数组对象转换为JSON对象的结果。
-
从数据库读取数据
angular应用程序消耗REST API数据。这些数据的格式是JSON格式，它需要
convert to Array of Objects，以便在用户界面上显示。当你处理来自REST API的数据时，我们将写一个angular服务来处理数据。服务是控制器和数据层之间请求的委托。
你将学习如何将数组转换为JSON以及将JSON转换为数组的例子。
在进行转换之前，一定要了解JSON的结构，按照JSON的结构来应用逻辑。
typescript是javascript的一个扩展版本。
下面的例子也可以在javascript环境下使用。
如何将数组对象转换为JSON，并举例说明
有很多方法可以将数组转换为JSON
-
forEach循环
以下是使用for each循环的步骤指南 -
创建数组，并用初始数据对其进行初始化，每个对象包含
id和name。 -
使用let关键字创建一个临时对象来保存数据。
-
数组中的forEach()方法被用来以相同的顺序迭代数组中的元素。这有一个回调函数，对每个元素进行调用。
-
使用lambda表达式，循环浏览每个元素并将元素添加到一个临时对象中。
-
最后，
JSON.stringify()方法被用来将对象转换为JSON字符串。
let empArray = [{
id: '1',
name: 'kiran'
},
{
id: '2',
name: 'john'
},{
id: '3',
name: 'Frank'
},
];
let jsonObject = {};
empArray.forEach(item => obj[item.id] = item.name);
let json = JSON.stringify(jsonObject);
console.log(empArray);
console.log(json);
输出
0: {id: "1", name: "kiran"}
1: {id: "2", name: "john"}
2: {id: "3", name: "Frank"}
{"1":"kiran","2":"john","3":"Frank"}
-
使用ES6的spread Operator
ES6介绍Spread Operator和Object assign方法来处理数组。 -
首先调用 "array map()方法"，在迭代过程中为每个元素调用一个函数，并为每个元素返回一个新数组。
-
这个新数组包含index=0的id："1 "和index=1的name："kiran"
-
在map链中用这些值创建一个Object，以返回一个新的数组。
-
下一步，深入复制对象数组到新的对象。
-
使用
JSON.stringify()method_将此对象转换为JSON字符串。
下面是一个示例代码
let jsonObject = Object.assign(...empArray.map(key => Object.values(key)).map(value => ({ [value[0]]: value[1] })));
let json = JSON.stringify(jsonObject);
console.log(empArray);
console.log(json);
这段代码的输出是一样的。
0: {id: "1", name: "kiran"}
1: {id: "2", name: "john"}
2: {id: "3", name: "Frank"}
{"1":"kiran","2":"john","3":"Frank"}
如何将JSON转换为数组对象
- 创建JSON对象和空数组对象
- 使用
for...in the loop, 遍历JSON对象的每个元素。 - 使用push方法将每个元素添加到数组中
let jsonObject = {
"1": "kiran",
"2": "john",
"3": "Frank"
};
var outputArray = [];
for (let element in jsonObject) {
outputArray.push({
id: element,
name: jsonObject[element]
});
}
console.log(outputArray)
输出
0: {id: "1", name: "kiran"}
1: {id: "2", name: "john"}
2: {id: "3", name: "Frank"}
结论
你学会了在typescript中的Array和JSOn。
- 将数组转换为JSOn
- 将JSON解析为数组
