How to extract array from json on Angular

Question

I'm working with angular2 ( version 5). I make an http request an get back json. I know how to access and use value but not the array. and I don't find how to extract the two array inside element.

here my json:

{ "ImpiantiProva": [
        {
        "nomeImpianto":"MFL1",
        "descrImpianto":"Multifilo 1",
        "posizione":"Place1",
        "dati_status": "true",
        "unita_misura": "m/s",
        "vel_attuale": 11.5,

        "vel": [24.5,13.6,34.6,12.1],
        "orario": ["17.05","17.06","17.07","17.08"]
        },  

        {
        "nomeImpianto":"MFL2",
        "descrImpianto":"Multifilo 2",
        "posizione":"Place2",
        "dati_status": "true",
        "unita_misura": "m/s",
        "vel_attuale": 12.5,

        "vel": [24.5,13.6,34.6,12.1],
        "orario": ["17.05","17.06","17.07","17.08"]
        }
    ]
}

In the data.service.ts I have the http request and it store values on :

stream$: Observable<ImpiantoModel[]>;

here my definition of the model:

#impianto.model
export class ImpiantoModel {
  nomeImpianto: string;
  descrImpianto: string;
  posizione: string;
  dati_status: string;
  unita_misura: string;
  vel_attuale: number;
  vel: VelocitaModel[];
  orario: OrariModel[];
}


 #orari.model.ts
export class OrariModel {
  orario: string;
}


  #velocita.model.ts
export class VelocitaModel{
  vel : number;
}

is it the right why to define my object?

How can I use the array "vel" and "orario"?

How can I print (access) the array "vel" of machine with "nomeImpianto" = "MFL1" ?

and how can I copy the array "vel" on new array?

thank you very much!

Answer 1

I'm not sure I understand you, but I'll try.

is it the right why to define my object?

It should be:

export class ImpiantoModel {
  nomeImpianto: string;
  descrImpianto: string;
  posizione: string;
  dati_status: string;
  unita_misura: string;
  vel_attuale: number;
  vel: Array<string>;
  orario: Array<string>;
}

(But I have to confess, I don't know why model and not an interface)

How can I use the array "vel" and "orario"?

What do you mean?

How can I print (access) the array "vel" of machine with "nomeImpianto" = "MFL1"

const thisContainsTheDataFromVel = whereYourDataIsStored['ImpiantiProva'].find((item) => { item['nomeImpianto'] === 'MFL1'})['vel'];

and how can I copy the array "vel" on new array?

UPDATE after reading your comment under this answer:

I took code from your example and added what you are missing. I made it so it can be more reusable (it can be enhanced even more, but I hope you understand the code and do what you need).

copyArray(data, targetValue) {
  const mfl1Data = data.find((item) => item['nomeImpianto'] === targetValue);

  if (mfl1Data) {
    return mfl1Data.vel;
  }

  return [];
}

getdata2() {
    this.http.get<ImpiantoModel[]>(this.myUrl)
      .subscribe(
        data => {
          this.variableToStoreIn = this.copyArray(data, 'MFL1');
          data.forEach(item => {
            this.sub$.next(item);
          });
        });

    return this.sub$;
  }

CopyArray finds the data and returns it. If you don't want it like this, but just set a value of some property to the value of vel array then you can change it to:

copyArray(data) {
      const mfl1Data = data.find((item) => item['nomeImpianto'] === targetValue);

      if (mfl1Data) {
        this.yourVariable = mfl1Data.vel;
      }
    }

If this answer is sufficient, please consider to mark it as the best answer, thank you.

Answer 2

Here is what I understood of what you want to do : get the item in your json resp and put it in your object , so the best way is to create a static method directly when you get the json response, before returning the value create this adapter adaptImpiant(jsonObj) which will do something like :

adaptImpiant(jsonObj) {
    let impiantTab = [];
    jsonObj.ImpiantiProva.forEach((item) => {
      let impiantoModel = {};
      // impiantoModel = item if the model (below) match the item;
      // if not manually set all your var like your velocita
      let velocita =  [] // is an array or an object with an array
      // if class velocita = {} 
      velocita = item.vel.slice(0); 
      // if class velocita.valuesTab = item.vel.slice(0);
      impiantoModel.velocita = velocita;
      impiantTab.push(impiantoModel);
    }    
}

Your model seems wrong in this case, because you already use a ImpiantoModel array, so just create a class with whatever you want in :

#impianto.model
export class ImpiantoModel {
   nomeImpianto: string;
   descrImpianto: string;
   posizione: string;
   dati_status: string;
   unita_misura: string;
   vel_attuale: number;
   vel: VelocitaModel // or simply [];
   orario: OrariModel // or simply [];
}

Answer 3

According to your model classes, your JSON is wrong. You should have something like this:

{ "ImpiantiProva": [
        {
        "nomeImpianto":"MFL1",
        "descrImpianto":"Multifilo 1",
        "posizione":"Place1",
        "dati_status": "true",
        "unita_misura": "m/s",
        "vel_attuale": 11.5,

        "vel": [
            {
                "vel": 24.5 
            },
             {
                "vel": 13.6
            }
            ...
        ],
        "orario": [
            {
                "orario": "17.05"   
            },
             {
                "orario": "17.06"
            }
            ...
        ]
        }
    ]
}

Your model expects ImpiantoModel.vel and ImpiantoModel.orario to be arrays of objects. In your JSON response one is an array of numbers and the other of strings.

An if you want to use it in an HTML template, considering that you have a class attribute in your .ts file like this:

private impiantoModels: ImpiantoModel[];

You could do something like this inside your .html template:

<div *ngFor="let impModel of impiantoModels">
    ...
    <div *ngFor="let v of impModel.vel">
        <p>{{v.vel}}</p>
    </div>

    <div *ngFor="let o of impModel.orario">
        <p>{{o.orario}}</p>
    </div>
</div>