Ionic push JSON array by selected key

Ionic Framework ionic-v3
1

I have JSON data like this:

[
    {
        "value":54,"ru":"R201","area":"HCC","unit":"PRODUCTION","equipment":"37 P 552 A"
        }, {
        "value":1,"ru":"R401","area":"HOC","unit":"PRODUCTION","equipment":"37 P 552 B"
        }, {
        "value":3,"ru":"R401","area":"LWSR","unit":"PRODUCTION","equipment":"37 P 552 A"
    }
]

I want to make a relation data based on the selected JSON key, so when I select data for example, data with key "ru":"R401" how do I push it with navParams into next page? I want to get related data based on the selected JSON key so I can get all related data in a row. I hope someone know how to help me out.

2

Especially thinking about the future (involving the Angular router), I would suggest avoiding designs where you are passing anything other than scalar strings between pages.

So what I would do here is to put all this stuff in a provider:

interface Thingy {
  ru: string;
  value: number;
  // &c
}

class ThingyService {
  private _thingies: { [ru: string]: Thingy } = {};
  constructor(tar: Thingy[]) {
    // this converts the array you posted, it doesn't have to
    // go in the constructor
    tar.forEach(t => this._thingies[t.ru] = t);
  }

  thingy(ru: string) {
    return this._thingies[ru];
  }
}

Now you can inject this service in every page that needs it and simply pass the ru key between pages, using the thingy() method to retrieve the full object.

3

let arr = [
{
“value”:54,“ru”:“R201”,“area”:“HCC”,“unit”:“PRODUCTION”,“equipment”:“37 P 552 A”
}, {
“value”:1,“ru”:“R401”,“area”:“HOC”,“unit”:“PRODUCTION”,“equipment”:“37 P 552 B”
}, {
“value”:3,“ru”:“R401”,“area”:“LWSR”,“unit”:“PRODUCTION”,“equipment”:“37 P 552 A”
}
]

try using this function

function findArrayObjByValue(value) {
var array = arr.find((key) => key.ru == value)
console.log(array);
}

findArrayObjByValue(“R401”); // pass selected value here
response would be : {value: 1, ru: “R401”, area: “HOC”, unit: “PRODUCTION”, equipment: “37 P 552 B”};

pass this response into navParams

this.navCtrl.push(page, response);

4

@nitishrajput01 but the response show only data with area key HOC, it should be get 2 row data with area key LSWR too because the ru with data R401 is selected, how I can do that?

5

Hi, @rapropos I getting trouble with your code, I have provider like this

  getDataChartYearly() {
    return new Promise(resolve => {
      this.http.get('assets/data/yearlyChart.json').map(res => res.json())
      .subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }

How to put your stuff into my code?

6

Yuck. Don’t create needless Promises like this.

If your data is coming from a static JSON file, then it’s a waste to be rearranging it on the device every time the application runs. Instead, write a converter that puts it in exactly the format that is easy for your app to consume, put that into your assets folder, and then this whole topic becomes mooted.

7

No, the data isn’t static I just want to test it with JSON files, actually the JSON is fetch from the server.

8
  1. workaround

var obj = [
{
“value”:54,“ru”:“R201”,“area”:“HCC”,“unit”:“PRODUCTION”,“equipment”:“37 P 552 A”
}, {
“value”:1,“ru”:“R401”,“area”:“HOC”,“unit”:“PRODUCTION”,“equipment”:“37 P 552 B”
}, {
“value”:3,“ru”:“R401”,“area”:“LWSR”,“unit”:“PRODUCTION”,“equipment”:“37 P 552 A”
}
]
function findArrayBykey(val) {
const arr = ;
Object.keys(obj).map((key) => {
if(obj[key].ru === val) {
arr.push(obj[key]);
}
return arr;
});
console,log(arr);
}

findArrayBykey(‘R401’)

2)nd workaround

var a = obj.filter((key) => key.ru == “R401”));
console.log(a);

9

Thank you, it works.

1 Like