角从json读取数据到textarea
问题描述:
我想从本地json文件中读取一些测试数据并将正确格式的数据输出到textarea中。现在尽管它只是输出[object Object]。我将如何去得到它,所以它输出:角从json读取数据到textarea
编号:theIdGoesHere
标题:theTitleGoesHere
step.service.ts用来调用JSON数据
public getJson(): Observable<any>{
return this.http.get('/assets/jsonData/MyJson.json')
.map(response => response.json());
}
MyJson服务.json
{
"data":[
{
"id": 1,
"title":"Test1"
},
{
"id": 2,
"title":"Test2"
}
]
}
main.componenet.ts
private testVar: any;
test(){
this.stepService.getJson().subscribe(data => (this.testVar = data));
}
anothermethod(){
this.test();
this.mainStepText = this.testVar; //mainStepText binded to textarea with [(ngModel)]="mainStepText"
}
get mainStepText2() { //Rebinded this one
const text = [];
const { data } = this.testVar;
for (let item of this.testVar.data) {
Object.keys(item).forEach(key => {
text.push(key + ': ' + item[key]);
});
}
return text.join('\r\n'); // \r\n is the line break
}
答
你可以遍历你的json.data和它们的键来提取文本和值,并生成你需要的文本区域的字符串。
const text = [];
for (let item of this.textVar.data) {
Object.keys(item).forEach(key => {
text.push(key + ': ' + item[key]);
});
}
return text.join('\r\n'); // \r\n is the line break
这里是正在运行的代码,我把它放在app.ts:http://plnkr.co/edit/3AbQYQOW0MVBqO91X9qi?p=preview
希望这是帮助。
答
您可以使用json
管你的对象格式化为json
字符串:
[(ngModel)]="mainStepText | json"
如果你想显示你的对象的特定属性,你可以在你的模板访问:
[(ngModel)]="mainStepText.data[0].title"
这将在您的字段中显示“Test1”。
我似乎遇到了const {data}行的问题。 ERROR TypeError:无法读取未定义的属性'data' – John
在您的真实代码中,只有在服务从文件中读取json时才会定义它。您可以将它初始化为{},或者只是在解构中回退 'const {data = []} = this.json || {};' 并更改for line以使用'for(let item of data){',这应该这样做。 这里:http://plnkr.co/edit/m3pNIHLm0Shg2sDpRApZ?p=info,json有一个未定义的值,解构后的数据会回落到[]。你可以通过不同的方式来解决它。 我会推荐,初始化它:http://plnkr.co/edit/gRo6Q3mECJ3rOZi9T9kh?p=preview – Juan