How to bind JSON object key value pair separately to angular template

Question

And i have a dynamic json coming from an API as below:

 {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}

I have below HTML code written in my template in which I am getting image-1, image-2 logos from my assets folder

  <div class="row">
    <div class="col-6" (click)="cityClick('Bangalore')">
      <div class="img-1">
        // my image-1 logo goes here
      </div>
      <div class="img-text">
        Bangalore
      </div>
    </div>
    <div class="col-6" col-6 (click)="cityClick('Mumbai')">
      <div id="image_block" class="img-2">
        // my image-2 logo goes here
      </div>
      <div id="text_block" class="img-text">
        Mumbai
      </div>
    </div>
  </div>

How to get the key of the json when i click on image and also display the text below the image from the corresponding key-value. And when i click i should be able to pass the key and text inside the click event. Please help as i am new to Angular!

https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor — VJAI, Feb 21 '19 at 10:39

Ankush Jain · Accepted Answer · 2019-02-21T11:30:38.353

First convert this JSON into an JavaScript/TypeScript array like below:

var json = {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra" };

var jsonToBeUsed = [];

for (var type in json) {
    item = {};
    item.key = type;
    item.value = json[type];
    jsonToBeUsed.push(item);
}

This will result in data like below:

Now use NgFor in the template to bind array. (Refer this for NgFor)

<div class="row">
    <div *ngFor="let item of array">
         <div class="col-6" (click)="cityClick(item)">
              <div class="img-1">
                // my image-1 logo goes here
              </div>
              <div class="img-text">
                {{item.value}}
              </div>
        </div>
    </div>
</div>

We have passed the whole object in the click event. You can read any of the desired property from the object in click event handler which you will write in the component.

For your special requirement, you can use below markup:

<div class='row' *ngFor='let index of array; let i = index; let even = even'>
    <div *ngIf="even" class='col-6' (click)="cityClick(array[i])">
        <div class="img-1">
            // my image-1 logo goes here
        </div>
        <div class="img-text">
            {{array[i].value}}
        </div>
    </div>
    <div *ngIf="!even" class='col-6' (click)="cityClick(array[i])">
        <div class="img-1">
            // my image-1 logo goes here
        </div>
        <div class="img-text">
            {{array[i].value}}
        </div>
    </div>
</div>

using *ngFor is a good idea but my structure is something which has two col-6 classes inside a row. Technically two key value pairs should go for every iteration — Onera, Feb 21 '19 at 11:12
how to get value instead of key in here -- getKeyByValue(object, value) { return Object.keys(object).find(key => object[key] === value); } — Onera, Feb 21 '19 at 11:56
The structure is not right using the above code. Since we are not incrementing index its printing twice and using the even or odd skips one level of printing — Onera, Feb 22 '19 at 06:12

score 0 · Answer 2 · answered Feb 21 '19 at 10:42

0

Use this below function in your code:

getKeyByValue(object, value) {
      return Object.keys(object).find(key => object[key] === value);
}

And use as

var dynamicJson = {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra"}

cityClick(value){
      var key = this.getKeyByValue(this.dynamicJson, value);
      console.log(key);
}

answered Feb 21 '19 at 10:42

Prachi

3,478
17
34

1

How to get value by key, i mean i need to find the value instead of key in getKeyByValue(object, key) function – Onera Feb 21 '19 at 11:41

score 0 · Answer 3 · answered Feb 21 '19 at 10:44

{123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}

Do you have influence on that JSON? This highly looks like a design issue for me. I assume those numbers are id's. I believe somethings like this should be better:

[{id: "123", name: "Mumbai"}, {id: "456", name: "Bangalore"}, {id: "789", name: "Chennai"}, {id: "101", name: "Andhra"},...}]

In that case you receive an array of cities, which could be an interface to parse to.

export interface City {
   id: string;
   name: string;
}

And you can easily render it in html by using *ngFor

<div *ngFor="let city of cities">
     <!--do something with city.id and city.name-->
   </div>

score 0 · Answer 4 · answered Feb 21 '19 at 10:55

0

<div *ngFor let value of json |keyvalue > </div>

answered Feb 21 '19 at 10:55

Sangar Lal

50
3

How to bind JSON object key value pair separately to angular template

4 Answers4

Linked