unable to display json content-Angular

Question

I am new to Angular and trying to figure out how to read and display the contents of a json file.

Component.ts

import { Component, OnInit } from '@angular/core';
import { RoomService } from '../shared/room.service';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  public httpdata=[];
  constructor(private roomservice:RoomService) { 
  }

  ngOnInit() {
    this.roomservice.getJSON().subscribe(data => {
      this.httpdata.push=data;
      console.log(data);
  });
  }
}

.html

 <div>
      <ul *ngFor="let t of httpdata ">
      {{t.id |json}}
      </ul>

   </div>

I am able to obtain the data using console.log but not able to display the data.

My JSON:

  {
  "rooms":[
    {
      "id": "1",
      "name": "abd",
      "Description": "blah blah",
      "Settings": {
        "Sources": ["ass","fff"],
        "hex": "#000"
      }
    },
    {
      "id": "2",
      "name": "abc",
      "Description": "blah",
      "Settings": {
        "Sources": ["sss,ddd"],
        "hex": "#000"
      }
    }
  ]
}

Any help appreciated!

There are a lot of things wrong with your current code. May I ask, have you tried following the tour of heroes at angular.io? — Jota.Toledo
– Jota.Toledo, Commented Dec 5, 2018 at 21:54
no, i found this code on stackover flow, like I said, the data does get displayed on console. Im just having trouble displaying it. Will check out heroes at angular.io though, thank you :) — V_stack
– V_stack, Commented Dec 5, 2018 at 22:10

dev-dan · Accepted Answer · 2018-12-05 22:12:20Z

1

you are not pushing to the array correctly, it would look like below

this.httpdata.push(data);

That should populate your array properly if that was what you needed, although i think below is what should be happening from the code provided. Starting inside the subscription.

ngOnInit() {
  this.roomservice.getJSON().subscribe(data => {
      this.httpdata = data.rooms;
      console.log(this.httpdata);
  });
}

And then in the template

<div>
  <ul *ngFor="let rooms of httpdata ">
    <li>{{ rooms.id }}</li>
  </ul>
</div>

Good place to have a read Angular tutorial

edited Dec 5, 2018 at 22:12

answered Dec 5, 2018 at 21:50

dev-dan

6,3333 gold badges27 silver badges46 bronze badges

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

2 Comments

V_stack Over a year ago

I tried using this.httpdata.push(data); but it still does not display anything.

dev-dan Over a year ago

ignore the first bit was just to show how .push() works, its not what you need, read from below, check edit :)

Collectives™ on Stack Overflow

unable to display json content-Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related