Mixing data binding

Ionic Framework ionic-v3
1

Hello everyone.

I’m trying to do a use of data binding quite particular.

I have 2 JSON files:

{
    "river": {
        "id": 1,
        "name": "Thing 1",
        "overall_quality": 3,
        "extra_info": "",
        "locations": [
            {
                "id": 2,
                "thing_id": 1,
                "lat": 22.12212,
                "lon": -3.48485,
                "town": "Bristol",
                "zoom": 0.99,
                "shop_id": 1,
                "quality_id": 2
            }
        ]
    }
}

and:

{
    "localShops": [
        {
            "id": 1,
            "name": "Seter",
            "link": "https:\/\/www.ser.co.uk",
            "telephone": "0800 788 4884",
            "email": "info@stwater.co.uk"
        },
        {
            "id": 2,
            "name": "Tter",
            "link": "http:\/\/www.tter.co.uk",
            "telephone": "0800 396 9120",
            "email": "customerservices@tter.co.uk"
        }
    ]
}

I have stored the second one in an array in order to display the name of the shop from the id in the locations file.

When I display the locations I do it as follows:

<ion-list>
    <button ion-item *ngFor="#location of locations">
      {{location.town}} - {{And here should be the name of the shop}}
      <button primary clear item-right>
        <ion-icon name="navigate"></ion-icon>
        Start
      </button>
    </button>

  </ion-list>

My first thought was trying to do it as
{{localShops[{{location.id}}].name}}
but it doesn’t work. I also tried other approaches like
{{localAuths}}+[{{location.id}}]+.name}}
but is not working either, as the only thing I retrieve is
[object Object],[object Object]

Any idea of how should I handle this so unorthodox approach for data binding?

Thanks.

2

Did you try {{ localShops[location.id].name }}?

Edit: i think you will need a function here.

getLocalShopName(id) {
  this.localShops.each(shop => {
    if (shop.id == id) return shop.name;
  });
  return '';
}

And then use {{ getLocalShopName(location.id) }} where you want the shop name.

1 Like
3

Another option would be to make localShops an object instead of (or in addition to) the array:

setLocalShops(lsjson:string):void {
  this.localShops = JSON.parse(lsjson);
  let nshops = this.localShops.length;
  this.localShopsById = {};
  for (let ix = 0; ix < nshops; ix++) {
    let shop = this.localShops[ix];
    this.localShopsById[shop.id] = shop;
  }
}

at which point localShopsById[location.id].name should interpolate as you wish.

4

Yes, I also tried {{ localShops[location.id].name }} and it was not working.

When I try to do the function that you suggest I have the following message:

this.localShops.each is not a function in [{{location.town}} {{getLocalShopName(location.id)}}

@rapropos thank you very much for your answer, but it is in a different format to what’s being used in Ionic 2 and I have “unexpected token while parsing file” error…

5

Ok, I was doing some testing and apparently is the comparison if (shop.id == id) what is failing… but I have no idea why, because the values are the same…

6

The code once modified (there was also a problem with each, as forEach must be used in this case):

getLocalShopName(id){
    this.localShops.forEach(localShops => {
      console.log("Local Shops.id value: " + localShops.id);
      console.log("id value: "+ id);
      console.log(localShops.name);
      if (localShops.id === id) {
        name = (localShops.name);
        }
    });
    return name;
  }

I hope is useful for people having the same problem. Thank you very much, @sveinla and @rapropos

7

Probably because your project is in JavaScript, and my code is TypeScript.