[英]Typescript create JSON Object Using Interface
I need to build a custom JSON object for store in PostgreSQL in json field and i use typescript for do this. 我需要构建一个自定义JSON对象以存储在PostgreSQL的JSON字段中,我使用Typescript来做到这一点。
In my testing case i have this code: 在我的测试案例中,我有以下代码:
interface Product {
id: number,
quantity: number,
}
let prod: Product = {} as any;
interface Products extends Array<Product>{}
let productItems : Products = [];
let productItems2 : Products = [];
let obj = {};
let container = [];
prod.id = 1;
prod.quantity = 10;
console.log("prod1: ", prod);
productItems.push(prod);
prod.id = 2;
prod.quantity = 100;
console.log("prod2: ", prod);
productItems.push(prod);
prod.id =3;
prod.quantity = 34;
console.log("prod3: ", prod);
productItems.push(prod);
obj = { "products1" : productItems}
container.push(obj);
prod.id = 10;
prod.quantity = 10;
console.log("prod2.1: ", prod);
productItems2.push(prod);
prod.id = 20;
prod.quantity = 100;
productItems2.push(prod);
console.log("prod2.2: ", prod);
prod.id =30;
prod.quantity = 34;
console.log("prod2.3: ", prod);
productItems2.push(prod);
obj = { "products2" : productItems2}
container.push(obj);
obj = { "products1" : productItems, "products2": productItems2}
console.log(JSON.stringify(obj));
For some reason when show in console the content for var productItems , always display the last item prod.id = 30 and prod.quantity = 34 . 由于某些原因,当在控制台中显示var productItems的内容时,始终显示最后一个项目prod.id = 30和prod.quantity = 34 。
The array not stored the data for every new product but in console i can see the correct values for every new item. 该数组未存储每个新产品的数据,但是在控制台中,我可以看到每个新产品的正确值。
My required is get an object equal to obj with correct values as follow: 我需要得到的对象等于obj ,其正确值如下:
{
"products1": [{
"id": 1,
"quantity": 10
}, {
"id": 2,
"quantity": 100
}, {
"id": 3,
"quantity": 34
}],
"products2": [{
"id": 10,
"quantity": 10
}, {
"id": 20,
"quantity": 100
}, {
"id": 30,
"quantity": 34
}]
}
If i print the var container display a JSON object into [] like array. 如果我打印var 容器,则将JSON对象显示在[]数组中。
What i do wrong? 我做错了什么?
Here i have my code play https://stackblitz.com/edit/typescript-3nfapq?file=index.ts 在这里我有我的代码播放https://stackblitz.com/edit/typescript-3nfapq?file=index.ts
The issue is that you're repeatedly mutating the same object rather than making a new object for every item you want to add to the array. 问题是您要重复更改同一对象,而不是为要添加到数组中的每个项目创建一个新对象。
The issue centers on the difference between variables and values . 问题集中在变量和值之间的差异上。 To see what I mean, let's walk through a part of your code.
要了解我的意思,让我们遍历代码的一部分。 We start with
我们从
let prod = {};
which declares the variable prod
and assigns it the value of an initially-empty object in some memory location -- let's say location 1. 它声明变量
prod
并为其分配某个内存位置中最初为空的对象的值-假设位置1。
Then we hit: 然后我们打:
prod.id = 1;
prod.quantity = 10;
This modifies the object prod
refers to -- the object at location 1 -- so that it now has id 1 and quantity 10. The next line, 这会修改
prod
引用的对象(位置1的对象),使其现在的ID为1,数量为10。
productItems.push(prod);
pushes the object at location 1 onto productItems
. 将位置1的对象推到
productItems
。 So far so god. 到目前为止,上帝。 But next, we have:
但是接下来,我们有:
prod.id = 2;
prod.quantity = 100;
productItems.push(prod);
This again changes the object at location 1 to have id
2 and quantity
100, and then again pushes that object onto productItems
. 这再次将位置1的对象更改为
id
2且quantity
100,然后再次将该对象推送到productItems
。 So at this point, the object at location 1 is {id: 2, quantity: 100}
and productItems
contains two references to it. 因此,此时,位置1处的对象为
{id: 2, quantity: 100}
并且productItems
包含对该对象的两个引用。
To fix this, you need to avoid reusing the same object. 要解决此问题,您需要避免重复使用同一对象。 You can still use the same variable
prod
if you want, but you need it to refer to a different object every time you make a new one to put in the array. 如果需要,您仍然可以使用相同的变量
prod
,但是每次将新对象放入数组时,都需要使用它来引用不同的对象 。 So for instance, if you wrote: 例如,如果您写了:
let prod = {} as any;
prod.id = 1;
prod.quantity = 10;
console.log("prod1: ", prod);
productItems.push(prod);
prod = {} as any;
prod.id = 2;
prod.quantity = 100;
console.log("prod2: ", prod);
productItems.push(prod);
prod = {} as any;
prod.id =3;
prod.quantity = 34;
console.log("prod3: ", prod);
productItems.push(prod);
then things work as you'd expect. 然后事情就会按您期望的那样工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.