Using Angular to load local JSON file

Question

This is my method to call a local JSON file. However, the JSON can be seen in the browser console but nothing is being seen in the HTML page, can anyone see anything I am missing in my code. Thanks

  loadUser(){

  this.http.get('assets/json/collection.json')
  .map(res => res.json())
  .subscribe(data => {
    this.data = data.results;
    console.log(data.results);
  });
}


    <div *ngFor="let result of results">   
        <p>{{results.title}}</p>
    </div>

scipper · Accepted Answer · 2017-11-23 15:06:44Z

1

Guessing that your loadUser() function is part of your component class, you probable have to call "data" in your template, as you assign data.results to this.data

<div *ngFor="let result of data">   
    <p>{{result.title}}</p>
</div>

answered Nov 23, 2017 at 15:06

scipper

3,1813 gold badges27 silver badges43 bronze badges

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

8 Comments

coderrrrrr Over a year ago

cannot find a differ supporting object [object Object] is the error i get when i change it to <div *ngFor="let result of data"> what ive read is that its how the json is coming back as an object

scipper Over a year ago

Can you paste the console.log result please?

coderrrrrr Over a year ago

loadUser(){ this.http.get('assets/json/collection.json') .map(res => res.json()) .subscribe(data => { this.data = data.results; console.log(data.results); }); } ionViewDidLoad() { console.log('ionViewDidLoad HomePage'); this.loadUser(); }

cxↄ Over a year ago

@scipper 's answer is right, I think. When is ionViewDidLoad() called? I think you should call this.loadUser() in ngOnInit()

coderrrrrr Over a year ago

I'm getting the error "Cannot find a differ supporting object [ object Object]" of type 'object'. NgFor only supports binding o iterables such as arrays. When I change to match scipper's suggestion?

|

ChesterLaborde · Accepted Answer · 2017-11-24 14:18:48Z

0

I think you need to make it so this.data is an Array of type result. So you would have to set up a model called Result. Also if your JSON has more than one result, you should make something like this:

collection.json

{
  "results":[ 
       {
         "id": 20,
         "title": "asdasd",
         "identifier": null,
         "colour_bg": "#bd2c2c",
         "colour_btn": "#a11212",
         "colour_content_bg": "#ffffff", 
         "logo_dashboard": "collection/21/SVwnz6tjluX81dIRNXjZo7issYUWyOVyD3LJFykm.png"‌,
         "logo_page": "collection/21/txgkqlkPA45mHSYtqZ5rFa4wLfHNUfXESE0xyhwp.png"‌
       },
       {
         "id": 21,
         "title": "Arsenal Test Collection",
         "identifier": null,
         "colour_bg": "#bd2c2c",
         "colour_btn": "#a11212",
         "colour_content_bg": "#ffffff", 
         "logo_dashboard": "collection/21/SVwnz6tjluX81dIRNXjZo7issYUWyOVyD3LJFykm.png"‌,
         "logo_page": "collection/21/txgkqlkPA45mHSYtqZ5rFa4wLfHNUfXESE0xyhwp.png"‌
       }
    ]
 }

result.ts

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

@Injectable()
export class Result{

   id: number; 
   title: String;
   identifier: String; 
   colour_bg: String;
   colour_btn: String; 
   colour_content_bg: String; 
   logo_dashboard: String;
   logo_page: String;

   constructor(){
   }

}

Then in your Page

page.ts

import { Result } from 'path/to/your/model/folder/result/
data: Array<Result> = [];

loadUser(){
   this.http.get('assets/json/collection.json')
   .map(res => res.json())
   .subscribe(data => {
      this.data = data.results;
      console.log(data.results);
   });
}

EDIT

You could also set up each Result object inside the subscribe and then push them into a final array.
IMPORTANT: Call loadUsers inside ionViewWillEnter(), so it runs every time you enter the page.

loadUsers()  {
    let results = [];
    var i;
    this.http.get('assets/json/collection.json')
    .map(res => res.json())
    .subscribe(data => {
      for(i=0; i< data.results.length;i++) {
          let result = new Result();
          // add each attr to the result object
          // i.e.
          result.id = data.results[i].id
          //push the object to the final array
          results.push(result)
        }
      })
      this.data = results;
    }

edited Nov 24, 2017 at 14:18

answered Nov 23, 2017 at 18:47

ChesterLaborde

4585 silver badges14 bronze badges

8 Comments

coderrrrrr Over a year ago

Will the HTMl output like so <div *ngFor="let item of results"> <p>{{item.id}}</p> </div>

coderrrrrr Over a year ago

The JSON is still showing in the browser but not in the HTML page?

ChesterLaborde Over a year ago

Did you add the array to the json?

ChesterLaborde Over a year ago

The other thing you can do is manually set each object inside the subscribe and push them to an array

coderrrrrr Over a year ago

Sorry how do you mean?

|

Collectives™ on Stack Overflow

Using Angular to load local JSON file

2 Answers 2

8 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest