How should I use map to get back some values of an object when the key are user input

Question

I have data as shown below:

0: Object { IG: "Low income", FLFPR: 47.00099945, lnGDP: 7.496679918, … }

1: Object { IG: "Upper middle income", FLFPR: 47.67599869, lnGDP: 9.302921813, … }

2: Object { IG: "Upper middle income", FLFPR: 15.18999958, lnGDP: 9.526954146, … }

3: Object { IG: "Lower middle income", FLFPR: 75.47899628, lnGDP: 8.802498179, … }

4: Object { IG: "High income", FLFPR: 47.82500076, lnGDP: 9.858328453, … }

5: Object { IG: "Upper middle income", FLFPR: 51.16600037, lnGDP: 9.011393414, … }

I need only say IG and FLFPR from each object. Also, I do not know the values IG and FLFPR. They are user inputs. For example, inputx = IG and inputy = FLFPR.

I tried using map but I couldn't get it to work. I know the below code is incorrect, but intutively this is what I need.

xydata = data.map(item => {x: item.inputx, y: item.inputy});

Is it right to use map in this context ?

Edit:

    dat = [{x: 8, y: 3, z:5},{x: 2, y: 10, z:5},{x: 11, y: 3, z:5},{x: 6, y: 6, z:5},{x: 5, y: 8, z:5}]
    xText = 'x'
    yText = 'y'  
    xydata = dat.map(item => ({x: item.[xText], y: item.[yText]}));

Possible duplicate of [ECMAScript 6 arrow function that returns an object](https://stackoverflow.com/questions/28770415/ecmascript-6-arrow-function-that-returns-an-object) — VLAZ, Jun 06 '19 at 17:08
you also need this: [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) — VLAZ, Jun 06 '19 at 17:09

Code Maniac · Accepted Answer · 2019-06-06T17:09:52.577

1

To access object values knowing key name is enough, You need to use proper key names to access values

change to this

xydata = data.map(item => ({x: item.IG, y: item.FLFPR}));

edited Jun 06 '19 at 17:09

answered Jun 06 '19 at 17:02

Code Maniac

37,143
5
39
60

I get a red squiggle around "y:" . Should I change the syntax ? – learner Jun 06 '19 at 17:08
@learner you need `()` around object (return value of map) , is it showing any error, ? – Code Maniac Jun 06 '19 at 17:11
Thank You !!! It works ! But I have the values IG and FLFPR in variables. How do I access it ? Maybe "$" would work ? I don't know the syntax to access the value of a variable. Could you please help with it. – learner Jun 06 '19 at 17:12
You can use `[]` notation so it will be like this `data.map(item => ({x: item.[variable] ...}));` – Code Maniac Jun 06 '19 at 17:14
@learner can you create a [mcve](https://stackoverflow.com/help/minimal-reproducible-example) – Code Maniac Jun 06 '19 at 17:26
I have edited the question to include an example. Thank You – learner Jun 06 '19 at 17:34
@learner you don't need `.` just use `[]` i.e `xydata = dat.map(item => ({x: item[xText], y: item[yText]}));` – Code Maniac Jun 06 '19 at 17:51

junvar · Answer 2 · 2019-06-06T18:07:47.547

1

You can use [] to access object properties dynamically.

let x = {dog: 3, cat: 4, key: 5};
let key = 'dog';

console.log(x.key); // 5
console.log(x['key']); // also 5
console.log(x[key]); // 3

In your case:

xydata = data.map(item => ({x: item[inputx], y: item[inputy]}));

Similarly, you can use [] when creating objects with dynamic property names.

let key = 'dog';
let x = {
  cat: 5,
  [key]: 6,
  key: 7,
};

console.log(x.key); // 7
console.log(x.dog); // 6

edited Jun 06 '19 at 18:07

answered Jun 06 '19 at 17:27

junvar

11,151
2
30
46

Thank You junvar ! That was a great explanation ! I finally got it ! xydata = data.map(item => ({x: item[inputx], y: item[inputy]})); – learner Jun 06 '19 at 17:41

How should I use map to get back some values of an object when the key are user input

Edit:

2 Answers2