角从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 
    }

来源

2017-06-06 John

你可以遍历你的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

希望这是帮助。

来源

2017-06-06 15:58:17 Juan

我似乎遇到了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

您可以使用json管你的对象格式化为json字符串：

[(ngModel)]="mainStepText | json"

如果你想显示你的对象的特定属性，你可以在你的模板访问：

[(ngModel)]="mainStepText.data[0].title"

这将在您的字段中显示“Test1”。

来源

2017-06-06 15:56:44 Supamiu

角从json读取数据到textarea

回答

相关问题