How to iterate json object using ngFor in Angular 4

Question

Problem:

I have below code:

<div>
   {{ data | json }}
</div>

which produces results in following json format

[  
 {  
  "display_title":"Megan Leavey",
  "mpaa_rating":"PG-13",
  "critics_pick":1,
  "byline":"NEIL GENZLINGER",
  "headline":"Review: In ‘Megan Leavey,’ a Marine, Her Dog and a Bond Forged in War",
  "summary_short":"Based on a true story, this film, starring Kate Mara, is both harrowing and heartstring-tugging.",
  "publication_date":"2017-06-08",
  "opening_date":"2017-06-09",
  "date_updated":"2017-06-09 02:44:28",
  "link":{  
     "type":"article",
     "url":"http://www.nytimes.com/2017/06/08/movies/megan-leavey-review-kate-mara.html",
     "suggested_link_text":"Read the New York Times Review of Megan Leavey"
  },
  "multimedia":{  
     "type":"mediumThreeByTwo210",
     "src":"https://static01.nyt.com/images/2017/06/09/arts/09MEGAN/09MEGAN-mediumThreeByTwo210.jpg",
     "width":210,
     "height":140
  }
},
{  
  "display_title":"The Hero",
  "mpaa_rating":"R",
  "critics_pick":1,
  "byline":"JEANNETTE CATSOULIS",
  "headline":"Review: For an Aging Actor, Another Chance to Be ‘The Hero’",
  "summary_short":"Brett Haley’s low-key feature, about an older actor seeking redemption after being reduced to a cliché, belongs to its star, Sam Elliott.",
  "publication_date":"2017-06-08",
  "opening_date":"2017-06-09",
  "date_updated":"2017-06-09 02:44:28",
  "link":{  
     "type":"article",
     "url":"http://www.nytimes.com/2017/06/08/movies/the-hero-review-sam-elliott.html",
     "suggested_link_text":"Read the New York Times Review of The Hero"
  },
  "multimedia":{  
     "type":"mediumThreeByTwo210",
     "src":"https://static01.nyt.com/images/2017/06/09/arts/09HERO/09HERO-mediumThreeByTwo210.jpg",
     "width":210,
     "height":140
  }
 }
]

and my pipe codes

import { Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'keys'})
 export class CustomPipe 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;
 } 
} 

Using suggestion from iteration a json object on Ngfor in angular 2 ,

I am trying to achieve movie title like this:

<ul class="suggestions" >
    <li class="suggestion1" *ngFor="#movie of data | keys">

        <a href="#" target="_blank" class="username">{{ movie.display_title }} </a>

    </li>

</ul>

but it throws error like

zone.js:642 Unhandled Promise rejection: Template parse errors: Parser Error: Unexpected token # at column 1 in [#movie of data | keys] in ng:///AppModule/RoughWorkComponent.html

I am using Angular 4.1.3

Answer 1

*ngFor="#movie of data | keys"> 

needs to be

*ngFor="let movie of data | keys">

you are using the old syntax

Edit: As @AJT_82 stated the object is an array not a JSON, so there's no need for the pipe:

*ngFor="let movie of data" is enough