Angular 2 : Create Div on the Fly by Iterating Over Objects

Question

I would like to create div's on the fly by iteration over the Objects in the JSON variable. I know how to create it if I had to iterate over Array of Arrays but not on Objects

My JSON is following

{  
    "physics" : {  
        "subjectCode": 101,  
        "subjectName": "Physics",  
        "sectionA": 200,  
        "sectionB": 500,  
        "sectionC": 158,  
    },  
    "chemistry" : {  
        "subjectCode": 102,  
        "subjectName": "Chemistry",  
        "sectionA": 200,  
        "sectionB": 500,  
        "sectionC": 158,  
    },  
    "maths" : {  
        "subjectCode": 102,  
        "subjectName": "Maths",
        "sectionA": 200,  
        "sectionB": 500,  
        "sectionC": 158  
    }
}

In my Component I am storing the data in data variable

export class AboutComponent implements OnInit {  
    data: object;  
    public dataArray: any;  
    constructor(private _data: Data) { }  
    ngOnInit() {  
        this._data.getData()  
            .subscribe(data => {  
                console.log(data);  
                for (let key in data) {  
                    console.log(data[key]);  
                    this.dataArray = [];  
                    this.dataArray.push(data[key]);  
                }  
            });  
    }
}

How to create 3 div - physics, chemistry and maths according to this JSON on the fly.
I am getting all the properties of the Objects but not the Objects itself. The output is like this

{  
"subjectCode": 102,  
"subjectName": "Maths",  
"sectionA": 200,  
"sectionB": 500,  
"sectionC": 158  
}

instead of physics, chemistry, maths

Typescript provides for..of statements https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html

I know some might flag it as a duplicate of
Angular 2: create divs dynamically

But kindly help me. I am a newbie and have wasted a lot of time in this.

Cannot find any answer with easy explanation.

Thanks in Advance.

Have you checked https://stackoverflow.com/q/45605257/5706293 ? — eko, Aug 18 '17 at 10:13
I tried following this - https://stackoverflow.com/a/45667731/7445094 but it is throwing an error after the first loop itself. **Component.ts** data: object; public dataArray: any[]; constructor(private _data: Data) { } ngOnInit() { this._data.getData() .subscribe(data => { // this.data = data; console.log(data); for (let key in data) { console.log(data[key]); this.dataArray.push(data[key]); } }); } And it gives the following error **ERROR TypeError: Cannot read property 'push' of undefined** — , Aug 18 '17 at 10:56
Please don't write code blocks in the comment section. It is hard to read as you'd appreaciate. Can you edit your question with it? — eko, Aug 18 '17 at 11:00
That's not initialization, that's a decleration. You are declaring that there is a field named `dataArray` and its type is any. It needs to be something like `this.dataArray = [];` — eko, Aug 18 '17 at 11:09
@echonax I just update the question with the output. Instead of physics, chemistry and maths in different div's, I got the output of Maths property in single div. I dont have enuf reputation. Cant move to chat. :/ — , Aug 18 '17 at 11:18
Its done. Thanks I was declaring it inside the for loop Declared this.dataArray = []; outside the for loop and got the expected output. @echonax Thanks. — , Aug 18 '17 at 11:40
Just one last thing. The output is coming in double quotes. How to remove them? — , Aug 18 '17 at 11:51

score 0 · Accepted Answer · answered Aug 18 '17 at 11:33

0

So you would do something like this:

@Component({
  template: `
    <div *ngFor="let item of dataArray">{{ item.subjectName }}</div>
  `
})
export class AboutComponent implements OnInit {
  // your class implementation...
}

answered Aug 18 '17 at 11:33

Martin

15,820
4
47
56

Angular 2 : Create Div on the Fly by Iterating Over Objects

1 Answers1