get data in angular stored as array of objects

Question

I want to get data stored in template_A that is col_1 and col_2 and print in table format, but i am getting [object,object]. I don't know how to get data stored as array of object.

I want to print next to template_A. You can have a look at array in console.

{
    "_id": {
        "$oid": "611f354944c4571778df456c"
    },
    "assignmentId": "61235a452a8a2428a43514ed",
    "studentId": "60dafc5c0254f7122e9fe7f0",
    "assignmentOf": "subject",
    "createdAt": {
        "$date": "2021-08-20T04:53:29.717Z"
    },
    "updateAt": {
        "$date": "2021-08-20T04:53:29.717Z"
    },
    "__v": 0,
    "grade": "b ",
    "remark": "good",
    "template": "template_A",
    "template_A": {
        "col_1": "col_1",
        "col_2": "col_2"
    },
    "template_B": {
        "col_1": "col_1",
        "col_2": "col_2"
    }
}

Angular app

                          <table>
                            <tr >
                              <td>{{ singleAssignment.template }}</td>
                              <td>{{ singleAssignment.template_A[0] }}</td>
                              <!-- <td>{{ singleAssignment.template_A[0] }}</td> -->
                            </tr>
                          </table>

Dharman · Accepted Answer · 2021-09-04 15:11:53Z

2

Two ways

1. Transform your json object to json array, and then use *ngFor in html.

"template_A": [
        { "col_1": "col_1" },
        { "col_2": "col_2" },
      ]

2. use Object.keys in *ngFor

"template_A": {
      "col_1": "col_1_value",
      "col_2": "col_2_value"
  }

in .ts file

public ObjectKeys = Object.keys

in .html file

<div  *ngFor="let cols of ObjectKeys(singleAssignment.template_A)">
   {{cols}}
   {{singleAssignment.template_A[cols]}}
</div>

output -

col_1 col_1_value
col_2 col_2_value

edited Sep 4, 2021 at 15:11

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 4, 2021 at 15:05

rohan

793 bronze badges

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

Comments

Suneel Kumar · Accepted Answer · 2021-08-24 05:16:52Z

1

I Have modified code for you please have a look

TS CODE

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  singleAssignment: any;

  constructor() {
    this.singleAssignment = {
      "_id": {
          "$oid": "611f354944c4571778df456c"
      },
      "assignmentId": "61235a452a8a2428a43514ed",
      "studentId": "60dafc5c0254f7122e9fe7f0",
      "assignmentOf": "subject",
      "createdAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "updateAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "__v": 0,
      "grade": "b ",
      "remark": "good",
      "template": "template_A",
      "template_A": {
          "col_1": "col_1",
          "col_2": "col_2"
      },
      "template_B": {
          "col_1": "col_1",
          "col_2": "col_2"
      }
    }
  }
}

HTML CODE

<table>
  <tbody>
    <tr >
      <td>{{ singleAssignment.template }}</td>
      <td>{{ singleAssignment.template_A['col_1']}}</td>
      <td>{{ singleAssignment.template_A['col_2'] }}</td>
    </tr>
  </tbody>
</table>

OUTPUT

============================================================================

UPDATED

TS CODE

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  singleAssignment: any;

  constructor() {
    this.singleAssignment = {
      "_id": {
          "$oid": "611f354944c4571778df456c"
      },
      "assignmentId": "61235a452a8a2428a43514ed",
      "studentId": "60dafc5c0254f7122e9fe7f0",
      "assignmentOf": "subject",
      "createdAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "updateAt": {
          "$date": "2021-08-20T04:53:29.717Z"
      },
      "__v": 0,
      "grade": "b ",
      "remark": "good",
      "template": "template_A",
      "template_A": [
        {
          "col_1": "col_1",
          "col_2": "col_2"
        }
      ],
      "template_B": {
          "col_1": "col_1",
          "col_2": "col_2"
      }
    }
  }
}

HTML CODE

<table>
  <tbody>
    <tr >
      <td>{{ singleAssignment.template }}</td>
      <td>{{ singleAssignment.template_A[0]['col_1']}}</td>
      <td>{{ singleAssignment.template_A[0]['col_2'] }}</td>
    </tr>
  </tbody>
</table>

OUTPUT

edited Aug 24, 2021 at 5:16

answered Aug 23, 2021 at 13:15

Suneel Kumar

7792 gold badges5 silver badges12 bronze badges

11 Comments

Anuj Todankar Over a year ago

@Suneelumar i tried your solution din't work for me.

Suneel Kumar Over a year ago

can you please share your code? so that I can check

Suneel Kumar Over a year ago

Like I also shared screenshot by running this above example, for me it's working fine, what issue you are facing?

Anuj Todankar Over a year ago

` <table> <tr > <td>{{ singleAssignment.template }}</td> <td>{{ singleAssignment.template_A['col_1'] }}</td> <td>{{ singleAssignment.template_A['col_2'] }}</td> </tr> </table>` used this solution i am not getting any result. i can fetch template but not template_A

Suneel Kumar Over a year ago

share your output screenshot and also code this singleAssignment

|

Dmitry S. · Accepted Answer · 2021-08-25 11:40:39Z

1

Use *ngFor directive on singleAssignment.template_A and then iterate its items.

edited Aug 25, 2021 at 11:40

Dmitry S.

1,6722 gold badges17 silver badges24 bronze badges

answered Aug 23, 2021 at 13:09

Amna.Naveed

111 bronze badge

1 Comment

Anuj Todankar Over a year ago

@Amna.Naveed how are you suggesting t implement it in table fomat? Can you give example.

Collectives™ on Stack Overflow

get data in angular stored as array of objects

3 Answers 3

Comments

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related