问题描述
在一个有角度的项目中,我具有以下界面:
export interface FruitsType {
id: String;
name: String;
selected : String;
}
并遵循JSON:
{
[
{"id" :"f1", "name": "apple", "selected": "false"},
{"id": "f2" , "name":"orange", "selected": "false"}
]
}
目标是将水果的名称分配给复选框.
我已经使用 ngonINIT 中的服务读取了JSON文件,其输出如下:
0:{id: "f1", name: "apple", selected: "false"}
1:{id: "f2", name: "orange", selected: "false"}
我想将上述输出的ID和名称分配给接口中的相应对象,并将其推入数组.那可能吗?怎么办?
这是我尝试过的
// here is my service:
getJSON (): Observable<FruitsType[]> {
return this.http.get<FruitsType[]>((this.configUrl))
}
// and here is how i get the response:
this.jsonService.getJSON().subscribe(response => {
// THAT WORKS FINE
console.log("here is the forst fruit: " + response[1].name);
console.log("here is the forst fruit: " + response[1].id);
//console.log(response.length);
// WANTS TO ADD THE RESPONSE TO AN INTERFACE
for (let i=0; i<response.length; i++){
this.fruitInterface.push({id: response[i].id, name: response[i].name, selected : response[i].selected });
}
console.log("lenght " + this.fruitInterface.length);
})
}
this.fruitInterface的长度为2,表示已添加值.但是我看不懂它们:((我这样做:this.fruitInterface.name ==>给出错误在数组中说:this.fruitInterface [i] .name ==>无效
请帮助我
Iam已对您的代码进行了更新,因为iam检查了一点.
这样声明的变量
public fruits: FruitsType[] = [];
这是我的方法
public getJSON() {
this.http.get("assets/file.json")
.subscribe(response => {
//here iam converting response as json
let temp=response.json();
//here iam getting fruits data in temp variable
this.fruits=temp.fruites;
//printing fruits Array.
console.log("Fruits",this.fruits);
//here iam newly added access in typescript file
for(let fruit of this.fruits){
console.log("Fruit Name",fruit.name);
}
console.log("Fruits access via index--->",this.fruits[0].name);
})
}
///此处是在html文件中新添加的访问权限
<ul *ngFor="let item of fruits">
<li>Fruit Name :{{item.name}}</li>
<li>Id :{{item.id}}</li>
<li>selected :{{item.selected}}</li>
</ul>
注意:此处的结果是任何数组,因此您不能像这样直接访问. this.fruits.name (错误).
工作良好,经过iam测试,我相信它对解决您的问题很有用.如果有任何错误,请通知我.如果解决了问题,请标记为答案.
还附加了样品输出窗口
In a angular project, I have following interface:
export interface FruitsType {
id: String;
name: String;
selected : String;
}
And following JSON:
{
[
{"id" :"f1", "name": "apple", "selected": "false"},
{"id": "f2" , "name":"orange", "selected": "false"}
]
}
The GOAL is to assign name of the fruits to a checkbox.
I have read the JSON file using a service--in the ngonINIT-- which it's output is as follows:
0:{id: "f1", name: "apple", selected: "false"}
1:{id: "f2", name: "orange", selected: "false"}
I want to assign the id and name of above output to the corresponding in the interface and push it to an array.Is that possible? HOW?
here what I have tried
// here is my service:
getJSON (): Observable<FruitsType[]> {
return this.http.get<FruitsType[]>((this.configUrl))
}
// and here is how i get the response:
this.jsonService.getJSON().subscribe(response => {
// THAT WORKS FINE
console.log("here is the forst fruit: " + response[1].name);
console.log("here is the forst fruit: " + response[1].id);
//console.log(response.length);
// WANTS TO ADD THE RESPONSE TO AN INTERFACE
for (let i=0; i<response.length; i++){
this.fruitInterface.push({id: response[i].id, name: response[i].name, selected : response[i].selected });
}
console.log("lenght " + this.fruitInterface.length);
})
}
the this.fruitInterface has the lenght of 2, meaning the values has been added. BUT I CANNOT READ THEM :((I do : this.fruitInterface.name ==> gives errorin array to say: this.fruitInterface[i].name ==> does not work
PLEASE HELP ME
Iam updated your code as little bit worked fine iam checked.
Declared variable like this
public fruits: FruitsType[] = [];
Here my method
public getJSON() {
this.http.get("assets/file.json")
.subscribe(response => {
//here iam converting response as json
let temp=response.json();
//here iam getting fruits data in temp variable
this.fruits=temp.fruites;
//printing fruits Array.
console.log("Fruits",this.fruits);
//here iam newly added access in typescript file
for(let fruit of this.fruits){
console.log("Fruit Name",fruit.name);
}
console.log("Fruits access via index--->",this.fruits[0].name);
})
}
//here iam newly added access in Html file
<ul *ngFor="let item of fruits">
<li>Fruit Name :{{item.name}}</li>
<li>Id :{{item.id}}</li>
<li>selected :{{item.selected}}</li>
</ul>
Note:-here fruits is any array so you cant directly access like this.this.fruits.name (Wrong).
Working Fine iam tested i believe its useful to solve your problem.If any errror please let me know.if it is solved problem please mark as answer.
Sample output window also attached
这篇关于将JSON分配给类型为Interface的数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!