Angular 2 join the array of objects using object's name

Question

In my backend, I will return following response:

[
      {
      "id": 1,
      "restaurant_name": "Ajisen Ramen Toronto",
      "description": "Japanese Restaurant",
      "phone": "416-977-8080",
      "address":       {
         "id": 3,
         "address": "332 Spadina Ave",
         "postalCode": "M5T 2G2",
         "latitude": 43.65406,
         "longitude": -79.3989,
         "city": {"city_name": "Toronto"}
      },
      "category":       [
                  {
            "id": 1,
            "categoryName": "Asian"
         },
                  {
            "id": 2,
            "categoryName": "Japanese"
         }
      ]
   }
]

Now in my angular 2 front end, I can successfully access the id, restaurant_name, address, but not the category by following code in

restaurant.component.html

<h3 style="color:green">Restaurant List:</h3>
<a *ngFor="let rest of restaurants" class="col-1-4">
  <div>
    <h4>Id: {{rest.id}} - Name: {{rest.restaurant_name}} - Category: {{ rest.category }} - Address: {{rest.address.address}},
      {{rest.address.city.city_name}}</h4>
  </div>
</a>

I want my Category part display like 'Category: Asian, Japanese', How can I do that?

Here is the restaurant.ts class

import { Address } from './address';
import { Category } from '../category';

export class Restaurant {
 categoryNames : string;
  constructor(public id: number,
    public restaurant_name: String,
    public description: String,
    public phone: String,
    public address: Address,
    public category: Category[]) {
      this.categoryNames = this.category.map(c => c.categoryName).join(',');
  };
}

I try access categoryNames in restaurant.component.html, but it didn't return any information to me.

Here is the category.ts

export class Category {
  constructor(public id: number,
              public categoryName: String) {
  }
}

For the rest of the code please refer to https://github.com/zhengye1/Eatr/tree/dev

Sudheer KB · Accepted Answer · 2017-07-27 05:43:56Z

In my component I wrote below code and it works fine

     constructor(){
      let res = JSON.parse(`[
      {
      "id": 1,
      "restaurant_name": "Ajisen Ramen Toronto",
      "description": "Japanese Restaurant",
      "phone": "416-977-8080",
      "address":       {
         "id": 3,
         "address": "332 Spadina Ave",
         "postalCode": "M5T 2G2",
         "latitude": 43.65406,
         "longitude": -79.3989,
         "city": {"city_name": "Toronto"}
      },
      "category":       [
                  {
            "id": 1,
            "categoryName": "Asian"
         },
                  {
            "id": 2,
            "categoryName": "Japanese"
         }
      ]
   }
]`);
        res = res.map((res1) => {
            return new Restaurant(res1.id,
                                    res1.restaurant_name,
                                    res1.description,
                                    res1.phone,
                                    res1.category);
        });
        this.restaurants = res;
}

In the html i wrote

<h3 style="color:green">Restaurant List:</h3>
<a *ngFor="let rest of restaurants" class="col-1-4">
  <div>
    <h4>Category:{{ rest.categoryNames }}</h4>
  </div>
</a>

AVJT82 · Accepted Answer · 2017-07-27 12:40:59Z

In your Restaurant class you have done the following:

this.categoryNames = this.category.map(c => c.categoryName).join(',');

so that is why you expect

{{ rest.categoryNames }} // I assume `category` was a typo

to work in template, as it wouldn't be an array, but... when fetching your data, you have actually not cast your incoming data as instances of Restaurant objects, you have done the following in your http-request:

.then(response => response.json() as Restaurant[])

this will not make the array to an array of Restaurant objects. You need to map the values to you class to truly make it an array of Restaurant.

Well, that can be done for example like this (shortened amount of properties):

getRestaurants(): Promise<Restaurant[]>{
  return this.http.get(this.restaurantUrl)
  .toPromise()
  .then(response => response.json().map(x => new Restaurant(x.id, x.category)))
  .catch(this.handleError);
}

Now your Restaurant objects will have the "new" property categoryNames and it will print just fine in template :)

Demo: http://plnkr.co/edit/9gOzpGU9IxroSy66edmm?p=preview

Piyush Patel · Accepted Answer · 2017-07-27 05:55:50Z

0

In the object the category is an Array type so you have to loop it and then access the property

<h3 style="color:green">Restaurant List:</h3>
<a *ngFor="let rest of restaurants" class="col-1-4">
  <div>
    <h4>Id: {{rest.id}} - Name: {{rest.restaurant_name}} - 
       Category: <span *ngFor="let cat of rest.category"> {{ cat.categoryName}}</span> - Address: {{rest.address.address}},
      {{rest.address.city.city_name}}</h4>
  </div>
</a>

you can also use ng-template or ng-container in place of

answered Jul 27, 2017 at 5:55

Piyush Patel

1,24015 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 2 join the array of objects using object's name

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related