You need to implement a custom pipe to do this. ngFor only supports array and not object.

This pipe will look like that:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

and use it like that:

<span *ngFor="#entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

See this question for more details:

• access key and value of object using *ngFor

For Angular 6.1+ , you can use default pipe keyvalue ( Do review also ) :

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

WORKING DEMO

Previously : As you are saying :

Angular2 - *ngFor / loop through json object with array , this couldn't help you

You dont have any need of that, coz your code works fine , please check

WORKING DEMO

Since your object has same key name every time while pushing the object will get updated with new value so how have do like this

 this.record.push(Object.assign({}, username));

Read about Object.assign() from here https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

You might also try out the new (alpha!) angularFire2 lib we're working on: https://github.com/angular/angularfire2, which uses Observables and thus plugs into the async pipe

Your component code needs refactoring. Here's how you can refactor it:

// First
import 'rxjs/add/operator/map';

// Then
ngOnInit() {
  this.invoiceService.getInvoices().snapshotChanges()
    .map(data => data.map(datum => datum.payload.toJSON()))
    .map(data => {
      return data.map(datum => {
        let purchases = [];
        for (let key in datum.purchases) {
          purchases.push(datum.purchases[key]);
        }
        datum.purchases = purchases;
        return datum;
      });
    })
    .subscribe(data => this.invoiceList = data);
}

Also, since doing something along the lines of Object.0 will throw an error, you should be using the Array member access pattern. Your template will have something like:

<tr *ngFor="let invoice of invoiceList">
  <td>{{invoice.customer.name}} {{invoice.customer.lastname}}</td>
  <td>{{invoice.totalPrice}}</td>
  <td>{{invoice.uid}}</td>
  <td>{{invoice.createdAt}}</td>
  <td>
    <li class="list-group-item" *ngFor="let purchase of invoice.purchases">
      {{purchase.product.name}}
    </li>
  </td>
  <td>
    <a class="btn btn-danger text-white" (click)="onDelete(invoice.$key)">
      <i class="fas fa-trash-alt"></i>
    </a>
  </td>
</tr>

Here's the Updated StackBlitz.

You can get the keys from an object using Object.keys (requires polyfill in IE AFAIK)

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
  transform(value): any {
    if(!value) return null;
    return Object.keys(value);
  }
}

<div *ngFor="let key of member | keys">{{member[key]}}</div>

For Angular 6 see How to iterate object keys using *ngFor

projectImage isn't a json - it's a string. You have some extra quotations in there. Try putting it into https://jsonlint.com/

You have gotten some good answers here, but all are manipulating your response and changing the build of it, instead of treating it as is. There is some other data in your response and want to retain the data, so here's a solution using Pipe instead.

You seem to have two objects in your array, but only one contains routes. Will this always be the case? If not, you might want to iterate the response and show all routes (if exists) for all objects, so I'd iterate the array first, and then iterate the routes:

<!-- Iterate array -->
<div *ngFor="let obj of jsonData">
  <!-- iterate routes for each object using pipe -->
  <div *ngFor="let route of obj.routes | keys">
    {{route.toCity}}
  </div>
</div>

And then the keys pipe:

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args?: any[]): any[] {
      // check if "routes" exists
      if(value) {
        // create instance vars to store keys and final output
        let keyArr: any[] = Object.keys(value),
            dataArr = [];

        // loop through the object,
        // pushing values to the return array
        keyArr.forEach((key: any) => {
            dataArr.push(value[key]);
        });
        // return the resulting array
        return dataArr;
      }
    }
}

This way you have not manipulated your response, and you have access to all other data that is coming with the response.

Demo

Your people object isn't an array so you can iterate over it out of the box.

There is two options:

• You want to iterate over a sub property. For example:

  <ul>
    <li *ngFor="#person of people?.actionList?.list">
      {{
        person.label
      }}
    </li>
  </ul>
  

• You want to iterate over the keys of your object. In this case, you need to implement a custom pipe:

  @Pipe({name: 'keys'})
  export class KeysPipe implements PipeTransform {
    transform(value, args:string[]) : any {
      if (!value) {
        return value;
      } 
  
      let keys = [];
      for (let key in value) {
        keys.push({key: key, value: value[key]});
      } 
      return keys;
    } 
  } 
  

  and use it this way:

  <ul>
    <li *ngFor="#person of people | keys">
      {{
        person.value.xx
      }}
    </li>
  </ul>
  

  See this answer for more details:

  • How to display json object using *ngFor

Seems you want to extract some values from your JSON in objects and push each object to an array which you can iterate through. First of all, use interface instead of class, so your Prod would look like this:

export interface Prod{
  name:string;
  sku: string;
  description:string;
  category: string;
  price: number;
}

And instead of using forEach in your service, let's just use map to extract the properties you want, assign them to objects with Object.assign(), int the exact manner as you were using with forEach:

getData(){
  return this.http.get('src/data.json')
    .map(res => res.json().data.map((x:any) => 
       Object.assign({name:x.name,sku:x.sku,description:x.description,category:x.relationships.categories.data[0].id, price:x.price[0].amount})))
}

So now when we are receiving the data in the component, it's an array of type Prod, which you can use well in your template:

products: Prod[];

ngOnInit() {
  this.service.getData()
    .subscribe(data => {
      this.products = data;
    })
}

and template:

<div *ngFor="let product of products"> 
  <div>{{product.name}} </div>
  <div>{{product.description}}</div>
  <div>{{product.sku}}</div>
</div>

Here's a DEMO from where I got the complete JSON from your previous question: here

ngFor iterates over tables, not objects. The error tells you so.

Your JSON is an object (it starts with {, not with [).

If you want to iterate over it, you either have to change it to an array, or you have to iterate on the keys. To do that :

this.keys = Object.keys(data);

In your HTML :

<mat-list-item *ngFor="let key of keys">

And you will acces your data with

{{ temps[key] }}