How to access json object in Ionic / Angular

Question

I need to access the firstBill value in this json:

[{
    "companyName": "Madrid",
    "producCompanyId": 4,
    "productCompanyName": "Empresa1",
    "state": {
        "id": 5,
        "description": "Completada sin precios"
    },
    "message": "\nHay otra empresa igual en ACTIVO                                              "
}, {
    "companyName": "Barcelona",
    "producCompanyId": 10,
    "productCompanyName": "Empresa2",
    "companyResultId": "889",
    "state": {
        "id": 4,
        "description": "Completada con precios"
    },
    "prices": {
        "priceList": [{
            "priceId": 699614,
            "companyPriceId": "1091931204",
            "firstBill": 281.96,
            "issuable": true
        }, {
            "priceId": 699609,
            "companyPriceId": "1091931204",
            "firstBill": 251.64,
            "issuable": true
        }, {
            "priceId": 699611,
            "companyPriceId": "1091931204",
            "firstBill": 302.6,
            "issuable": true
        }]
    },
    "message": ""
}]

Now I have this code but with errors because of undefined prices jsonarray in other (the first one of the previous json) objects:

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="let oferta of ofertas">
      <h2>{{oferta.companyName}}</h2>
      <pre>{{ oferta.prices.priceList[0] ? oferta.prices.priceList[0] | json }}</pre>
    </ion-item>
  </ion-list>
</ion-content>

feels like your first json structure is an array, and prices exists only in a 2nd item in array. those items are objects, but first branch is an array: so, ofera[1].prices.priceList ... use jsonblob or any editor, i think you're not seeing the proper json structure and there is your error... — Marko, Mar 23 '17 at 18:57
yeah, sorry, oferta[0], you're right. could you help me to get the first item in the 'priceList' element? it throws an undefined error — jmunozco, Mar 23 '17 at 18:59
if it's not necessary to show all oferta.prices.priceList of every ofertas item, how about use [*ngIf](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf) `
here put another *ngFor iterate through oferta.prices.priceList so you access all firstbill
` — AimeTPGM, Mar 23 '17 at 19:21
im not sure if he wants to access all the first bill values or just the first one. What I wrote will get you just the first one as you asked for in comment... anyway paste code on json blob or look at this sort of examples you'll figure it out http://stackoverflow.com/questions/18436084/how-to-output-elements-in-a-json-array-with-angularjs — Marko, Mar 23 '17 at 19:34

score 0 · Answer 1 · answered Mar 24 '17 at 09:16

Try the modified code below. Probably this could help you. I added ngIf with some nested div structure.

 <ion-list>
          <ion-item *ngFor="#oferta of ofertas">
            <h2>{{oferta.companyName}}</h2>
                  <div *ngIf="oferta.prices">
                   <div *ngFor="#plist of oferta.prices.priceList">
                          <pre>{{ plist | json }}</pre>
                  </div>
            </div>
          </ion-item>
       </ion-list>


 this.ofertas = [{
        "companyName": "Madrid",
        "producCompanyId": 4,
        "productCompanyName": "Empresa1",
        "state": {
            "id": 5,
            "description": "Completada sin precios"
          },

          "message": "\nHay otra empresa igual en ACTIVO                                              "
      }, {
          "companyName": "Barcelona",
          "producCompanyId": 10,
          "productCompanyName": "Empresa2",
          "companyResultId": "889",
          "state": {
              "id": 4,
              "description": "Completada con precios"
          },
          "prices": {
              "priceList": [{
                  "priceId": 699614,
                  "companyPriceId": "1091931204",
                  "firstBill": 281.96,
                  "issuable": true
              }, {
                  "priceId": 699609,
                  "companyPriceId": "1091931204",
                  "firstBill": 251.64,
                  "issuable": true
              }, {
                  "priceId": 699611,
                  "companyPriceId": "1091931204",
                  "firstBill": 302.6,
                  "issuable": true
              }]
          },
          "message": ""
      }]

How to access json object in Ionic / Angular

1 Answers1