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

Issue

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!

Solution

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:

enter image description here

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>

Answered By – Ankush Jain

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.