Angular reading data from json into textarea

Question

I'm trying to read some test data from a local json file and output the data with correct formatting into a textarea. Right now though it just outputs [object Object]. How would I go about getting it so it outputs:

Id: theIdGoesHere

Title: theTitleGoesHere

step.service.ts The service used to call the json data

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
  }

score 4 · Answer 1 · answered Jun 06 '17 at 15:56

4

You can use json pipe to format your object into a json string:

[(ngModel)]="mainStepText | json"

If you want to show a specific property of your object, you can access it in your template:

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

This will display "Test1" in your field.

answered Jun 06 '17 at 15:56

Supamiu

8,501
7
42
76

You will have to capture the change separately. Do this: [ngModel]="mainStepText | json" https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular – Dinesh Khetarpal Mar 04 '21 at 16:34

score 3 · Accepted Answer · answered Jun 06 '17 at 15:58

3

You could loop through your json.data and through their keys to extract the text and values and generate the string you need for the text area.

    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

Here's the running code, I put it in app.ts: http://plnkr.co/edit/3AbQYQOW0MVBqO91X9qi?p=preview

Hope this is of help.

answered Jun 06 '17 at 15:58

Juan

6,125
3
30
31

I seem to run into an issue with the const {data} line. ERROR TypeError: Cannot read property 'data' of undefined – John Jun 06 '17 at 16:57
Got it, in your real code, json is not defined until the service reads it from the file. You could initialize it to {} or just fallback in the destructuring `const { data = [] } = this.json || {};` and change the for line to use `for (let item of data) {`, that should do it. Here: http://plnkr.co/edit/m3pNIHLm0Shg2sDpRApZ?p=info, json has an undefined value, and destructuring data out of it fall backs to []. There's different ways you can go around it. I would recommend, initialize it: http://plnkr.co/edit/gRo6Q3mECJ3rOZi9T9kh?p=preview – Juan Jun 06 '17 at 17:18

Angular reading data from json into textarea

2 Answers2