CODEWITHSUNDEEP
angularangular2-template
Mudit Maheshwari
Mudit Maheshwari

Reputation: 23

access key value of object

I am trying to make this page: enter image description here

So far i am able to make the above red banner and the google maps. Following is the api being used to fetch data: http://test.poletalks.com/websites/getData

I have created 3 components for representing the 3 rectangles. I am having parse error in the 1st rectangle. This file uses data which is 

{"store":{"id":"58da327fa0358e186624b72daaa","name":"NIT, Calicut","store_type":"Education","description":"National Institute of Technology, Calicut is a leading institute of engineering and architecture in India. The motto of the institute is 'From Darkness, Lead us unto Light'","location":[75.9342274000001,11.3216676],"formatted_address":"National Institute Of Technology, Kattangal, Kerala, India","image":"http://res.cloudinary.com/poletalks/image/upload/v1472055369/Nitc_my3vig.jpg"}

I am trying to represent the first rectangle as a table. However i am not able to access the object using ngFor.

details.component.html

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
    <table class="table" border="1">
      <tr *ngFor="let #item of stored">
      <td *ngFor="#key of c | keys">{{key}}:{{c[key]}}  </td>
      </tr>
    </table>
  </div>
</div>
</div>

I have created a pipe to convert the object to array.

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

@Pipe({
  name: 'keypipe'
})
export class KeypipePipe implements PipeTransform {

  transform(value: any, args: string[]): any {
    let keys = [];
        for (let key in value) {
          keys.push(key);
        }
        return keys;
      }
    }
  //  return null;

However I am getting parse error.. please help me implement this page.

Upvotes: 2

Views: 986

Answers (1)

AVJT82
AVJT82

Reputation: 73357

You don't actually need the pipe in this case, you have two objects inside an Object, so you can just use the property paths. First for showing the content of store, something in the line of the following:

<fieldset>
  <legend>{{stored?.store?.name}}</legend>
  <p>{{stored?.store?.description}}</p>
  <!-- rest of the properties -->
  <img src="{{stored?.store?.image}}" />
</fieldset>

Notice we are using the safe navigation operator to safeguard null/undefined values.

Then over to your table view, there we want to access the content of store_admins, so your table should look something like this:

<table>
  <tr *ngFor="let admin of stored?.store_admins">
    <td>{{admin.login_id}}</td>
    <!-- rest of the properties -->
  </tr>
</table>

That should do it! :)

Here's a

Demo

Upvotes: 1

Related Questions