Question

我正在尝试从本地json文件中读取一些测试数据，并将具有正确格式的数据输出到textarea中。现在虽然它只输出[object Object]。我将如何获得它以便输出：

Id：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
  }

Answer 1

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

[(ngModel)]="mainStepText | json"

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

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

这将显示＆＃34; Test1＆＃34;在你的领域。

Answer 2

您可以遍历您的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到textarea

2 个答案: