loop through array or json file in angular 4

Question

I want to loop through an array of objects in angular 4 , I use a .ts file to export array as a variable in posts.ts

export var posts = [
  {
    "name":"art",
    "title":"Art",
    "items":[
      {
        "id": "1",
        "title":"Tooling Up",
        "author":"Amber Bravo",
        "date":"June 14 2015",
        "primaryColor":"#5a7785",
        "secondaryColor":"#455a64",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/tooling-up-header-a13cfd9a.svg",
        "desc":"How a new generation of prototyping tools at Google will help designers build better software.",
        "content":"# content goes here"
      },
      {
        "id": "2",
        "title":"Expressing Brand in Material",
        "author":"Viktor Persson & Rachel Been",
        "date":"July 4 2015",
        "primaryColor":"#202226",
        "secondaryColor":"#333",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/article_brand_2x1_202226-fc539618.svg",
        "desc":"Material design offers a system for designing functional and elegant software. How does your brand fit into the framework? We’ve created a step-by-step guide to staying on-brand while going material.",
        "content":"# content goes here"
      },
      {
        "id": "3",
        "title":"New Design Tools",
        "author":"Amber Bravo",
        "date":"July 29 2015",
        "primaryColor":"#3e50b4",
        "secondaryColor":"#303fc3",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/150727_GD_Article_ToolingUpFurther_1x1Tile-01-86c8e03e.svg",
        "desc":"See Also: (More) thoughts on design tools",
        "content":"# content goes here"
      }
    ]
  },
  {
    "name":"film",
    "title":"Film",
    "items":[
      {
        "id": "1",
        "title":"Design from iOS to Android (and Back Again)",
        "author":"Roman Nurik & Viltor Persson",
        "date":"Aug 20 2015",
        "primaryColor":"#3e50b4",
        "secondaryColor":"#303F9F",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/renditions/Article_iOS_to_Android_Header_3e50b4-f064882f-1240.png",
        "desc":"A practical guide to designing across platforms",
        "content":"# content goes here"
      },
      {
        "id": "2",
        "title":"Demystifying Density",
        "author":"Sebastien Gabriel",
        "date":"July 10 2015",
        "primaryColor":"#00ccb8",
        "secondaryColor":"#00b7a5",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/article_dpi_00ccb8-34fdd39e.svg",
        "desc":"Sebastien Gabriel takes one for the team with his exhaustive guide to DPI & PPI",
        "content":"# content goes here"
      },
      {
        "id": "3",
        "title":"Pixate and Form 1.3",
        "author":"Google Design",
        "date":"May 30 2015",
        "primaryColor":"#eeeeee",
        "secondaryColor":"#9e9e9e",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/pixate-and-form-1-3-header-2061f19f.svg",
        "desc":"Discover the latest features and start designing native prototypes on your device.",
        "content":"# content goes here"
      },
      {
        "id": "4",
        "title":"Welcome to the New Google Design",
        "author":"Google Design",
        "date":"Sep 10 2015",
        "primaryColor":"#3367d6",
        "secondaryColor":"#2755CC",
        "image":"https://g-design.storage.googleapis.com/production/v5/assets/Article_Welcome_Header_2880-ce3ec22d.svg",
        "desc":"More design, all the time",
        "content":" # content goes here"
      }
    ]
  },
  {
    "name":"photography",
    "title":"Photography",
    "items":[]
  },
  {
    "name":"design",
    "title":"Design",
    "items":[]
  },
  {
    "name":"topten",
    "title":"Top Ten",
    "items":[]
  },
  {
    "name":"aday",
    "title":"A Day in the Life",
    "items":[]
  }
]

then I import it in app.componenet.ts normally with :

import { posts } from './posts';

now what I don't know is how to loop through it or how to load json file then loop through it I mean how to loop in html to display data inside the app.componenet.html

Michał Ochociński · Accepted Answer · 2017-09-22 07:38:18Z

3

You have to pass this array to view.

@Component(...)
class AppComponent {
    posts = posts;
...

And then in view you have to use *ngFor directive.

<ng-container *ngFor="let post of posts">
{{ post.title }}
</ng-container>

answered Sep 22, 2017 at 7:38

Michał Ochociński

4553 silver badges11 bronze badges

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

4 Comments

Saber Hosney Over a year ago

it's works perfect , but how I can loop inside the items ? so the Art Film and other categories will be output to navigation and the items will the posts inside

Michał Ochociński Over a year ago

You can nest another ngFor *ngFor="let item of post.items"

Michał Ochociński Over a year ago

Can you paste jsfiddle?

Saber Hosney Over a year ago

sorry it was my mistake I used let item of posts.items instead of item of post.items

Collectives™ on Stack Overflow

loop through array or json file in angular 4

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related