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
  }

Supamiu · Accepted Answer · 2017-06-06 15:56:44Z

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 6, 2017 at 15:56

Supamiu

8,7417 gold badges47 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dinesh Khetarpal Over a year ago

You will have to capture the change separately. Do this: [ngModel]="mainStepText | json" stackoverflow.com/questions/39642882/…

Juan · Accepted Answer · 2017-06-06 15:58:17Z

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 6, 2017 at 15:58

Juan

6,4633 gold badges32 silver badges33 bronze badges

2 Comments

John Over a year ago

I seem to run into an issue with the const {data} line. ERROR TypeError: Cannot read property 'data' of undefined

Juan Over a year ago

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: 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: plnkr.co/edit/gRo6Q3mECJ3rOZi9T9kh?p=preview

Collectives™ on Stack Overflow

Angular reading data from json into textarea

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related