Getting child data from a JSON object in angular

Question

I'm new in angular and cloud function. I've created a cloud function to fetch data from Firebase. It is responding correctly in postman.

It's format is as follows:

{
    "products": {
        "-L7bnFARTPRbuYbPXnVw": {
            "createdAt": "Thu Mar 15 2018 09:26:09 GMT+0530 (India Standard Time)",
            "image": "https://firebasestorage.googleapis.com/v0/b/sign-up-angular.appspot.com/o/images%2Fbackground1.jpg?alt=media&token=fe96aeab-4f6f-4338-ad08-c3e0da1d610b",
            "likes": 1,
            "pname": "asdf",
            "price": "123"
        },
        "-L7bnJBfADM_PFVnKo4N": {
            "createdAt": "Thu Mar 15 2018 09:26:25 GMT+0530 (India Standard Time)",
            "image": "https://firebasestorage.googleapis.com/v0/b/sign-up-angular.appspot.com/o/images%2Fbackground1.jpg?alt=media&token=fe96aeab-4f6f-4338-ad08-c3e0da1d610b",
            "likes": 0,
            "pname": "asdf",
            "price": "123"
        }
    }
}

I want to retrieve the data and show in angular.

The angular ts & html files are as follows:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs/Observable';
import { Product } from '../product';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  providers: [ProductService]
})
export class DataComponent implements OnInit {
  products:Product[];
  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.readProducts()
      .subscribe(products =>{
        this.products = products['records']
        console.log(products);
        //On console data are showing properly.
      });
  }
}

HTML:

 <div class="row">
  <div class="col-md-12">

      <!-- HTML table for our list of product records -->
      <table class='table table-hover table-responsive table-bordered'>

          <tr>
              <th>Product</th>
              <th>Price</th>
              <th>Like</th>
              <th>Image</th>
          </tr>

          <!-- Use *ngFor directive to loop throught our list of products. -->
          <tr *ngFor="let product of products">
              <td>{{product.pname}}</td>
              <td>{{product.products.pname}}</td>
              <td>{{product.price}}</td>
              <td>{{product.likes}}</td>
              <td>{{product.image}}</td> 

          </tr>
      </table>
  </div>
</div>

But it is showing no data.

So please help to show the data in table. Thanks in advance.

Bikram Sao · Accepted Answer · 2018-03-27 06:26:04Z

2

Thanks everyone . I solved the problem as follows,

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  providers: [ProductService]
})
export class DataComponent implements OnInit {
  products: any={};
  items: any=[];

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.readProducts()
      .subscribe(products =>{
        this.products = products['products']

        console.log((Object.values(this.products)));
        this.items = Object.values(this.products);

        console.log("Item data:"+this.items);

      });


  }

}

answered Mar 27, 2018 at 6:26

Bikram Sao

611 silver badge10 bronze badges

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

Comments

Shashank Agrawal · Accepted Answer · 2018-03-24 06:45:41Z

0

Change line from:

this.products = products['records']

to

this.products = products['products']

because the response format has the key products.

answered Mar 24, 2018 at 6:45

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

1 Comment

Bikram Sao Over a year ago

It didn't work and previously it was showing the json object correctly in the log for the code:'console.log(products);'

Orodan · Accepted Answer · 2018-03-24 07:30:49Z

The problem comes from the fact that products is an object and not an array.

To iterate through your products with *ngFor, I would advise to convert your products in an array.

A simple way to do so is to use Object.keys() to get your products ids and construct your array something like that :

ngOnInit () {
   this.productService.readProducts().subscribe(products => {
      const productIds = Object.keys(products['records']);
      this.products = productIds.map(productId => {
         const product = products['records'][productId];
         product.id = productId;

         return product;
      });
   });
}

I imagine you still need to keep a track of your product id, so in the example I add it to the product object before adding it to your array of products.

Hope that helps

Ashish Panchal · Accepted Answer · 2018-03-24 07:35:23Z

0

There's a fine library which can be use to manipulate JSON documents and it's very small and very easy to learn and only one function to remember (jmespath.search(obj, filter)).

You can read more on it's website - http://jmespath.org/ or http://ashishuideveloper.in/2017/12/manipulate-json-document-easily-jmespath/

answered Mar 24, 2018 at 7:35

Ashish Panchal

5042 silver badges8 bronze badges

Comments

BinaryPatrick · Accepted Answer · 2018-03-27 15:04:39Z

0

Your data is not an array and thus is not iterable. An object can only be traversed by it's fields. You could instead make a shadow array using Object.keys and iterate through it instead. Ie:

productNames: string[];
products: Product

ngOnOnit() {
    // Code to get the products and stuff
    this.productNames = Object.keys(this.products);
}

And then in the HTML

<tr *ngFor="let productName of productNames">
    <td>{{products[productName]}}</td>
</tr>

edited Mar 27, 2018 at 15:04

answered Mar 24, 2018 at 6:53

BinaryPatrick

5127 silver badges18 bronze badges

2 Comments

Bikram Sao Over a year ago

It's showing error -ERROR in src/app/data/data.component.ts(23,35): error TS2339: Property 'products' does not exist on type 'Product[]

BinaryPatrick Over a year ago

I may have been misreading the object and added one unneeded level. It looks like it should be this.products not this.products.products

Collectives™ on Stack Overflow

Getting child data from a JSON object in angular

5 Answers 5

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related