Angular - Displaying Object Within Object in Json

Displaying Objects Inside JSON Object in Angular

Please try like this . In the template you can keyvalue pipe . using this pipe you can access the key and value of the objects item1 and item2.

characters2 = {
    characters2: [
      {
        campaign: "Menagerie Coast",
        index: 1,
        name: "Mark Whithershmitz",
        portrait: "assets/pics/markW.jpg",
        affiliation: "Kryn Dynasty",
        class: "Wizard - Bladesinger",
        list1: {
          Swords: ["McClane: Moon-Glow Scimitar", "Carver: Shadow Sword"]
        },
        list2: { "Remarks about his Race": "5" },
        title1a: "Sword Count",
        title1b: "2",
        title1c: "fa fa-robot",
        title2a: "Kills",
        title2b: "0",
        title2c: "fas fa-skull-crossbones",
        title3a: "Magic Sword",
        title3b: "None",
        title3c: "fas fa-dumpster-fire"
      },
      {
        campaign: "Menagerie Coast",
        index: 2,
        name: "The Hermit II",
        portrait: "assets/pics/theHermit2.jpg",
        affiliation: "None?",
        class: "Rogue/Mastermind",
        list1: { "Bag of Animal Cotton?": ["Lion x 2", "Goat"] },
        list2: [],
        title1a: "Bar Fights",
        title1b: "0",
        title1c: "fas fa-beer",
        title2a: "Kills",
        title2b: "0",
        title2c: "fas fa-skull-crossbones",
        title3a: "Badassery",
        title3b: "Medium",
        title3c: "far fa-laugh-beam"
      }
    ]
  };

<div *ngFor="let character of characters2.characters2">
    <h1>{{character.name}}</h1>
    <div *ngFor="let item of character.list1 |keyvalue">
        <span>{{item.key}}</span> : <span>{{item.value}}</span>
    </div>

    <div *ngFor="let item of character.list2 |keyvalue">
            <span>{{item.key}}</span> : <span>{{item.value}}</span>
    </div>
</div>

Best way to display a list within a json object via Angular

Can you please try this code snipped

    ngOnInit(){
    this.pService.getJson().
     then(response => {
       this.json = response;
     })
  }

Angular get Json Object and display it with HTML

I finally could solve this. This is my service

getCart(): Observable<Cart[]> {

    return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl);
}

this is my component:

my_data: any;

public loadCart() {
   
    this.cart_Service.getCart().subscribe((data: Cart[]) => this.my_data = data);
}

this is my HTML:

<div>
   <p> Grand Total : {{ my_data.grandTotal }} </p>
 </div>

How display object in angular?

1. Concatenate string and object in controller

You need to use comma instead of plus to log the object in the controller.

console.log("InstanceId is: ", InstanceId)

instead of

console.log("InstanceId is: " + InstanceId)

2. Render object property in the template

The hyphen in the property must obfuscate for the template rendered to access it. You could use bracket notation instead of dot notation here.

<td>{{ Instance Id["case-id"]}}</td>

instead of

<td>{{ Instance Id.case-id}}</td>

Display nested JSON file in Angular

you just nest ngFor...

<p>list works!</p>
<ul *ngFor="let product of arrProducts">
    <li>{{ product.produkt }}</li>
    <li *ngFor="let info of product.produktinformation">{{ info.artikelnr }}</li>
</ul>

Display nested Json in Angular component

You can use {{nestedobcategory.value.name}} to access the name property:

<div *ngFor="let obcategories of users | keyvalue">
    <div *ngFor="let obcategory of obcategories.value | keyvalue">
        <div *ngFor="let nestedobcategory of obcategory.value | keyvalue">
            {{nestedobcategory.value.name}}
        </div>
    </div>
</div>

Working Demo

Best way to display a json object in a json object in Angular 2 release 6

How about simply

<pre>
  {{ yourObject | json }}
</pre>

Running example here:

https://stackblitz.com/edit/angular-ux1xst?file=src%2Fapp%2Fapp.component.ts

---

Related Topics