iterate over array of objects and fetch only specific key to form a new array of object in react js

Question

I have below object. I want to iterate over it and need to fetch only key's values of ability and value key.

var object = [{
    ability: "Strong",
    name: "STRENGTH",
    value: "customer has 10 properties",
    type: "MultiChoice"
  },
  {
    ability: "Good",
    name: "STRENGTH",
    value: "customer has 5 properties",
    type: "MultiChoice"
  },
  {
    ability: "average",
    name: "STRENGTH",
    value: "customer has 3 properties",
    type: "MultiChoice"
  }
]

So my expected output should be like below.

[{
    ability: "Strong"
    value: "customer has 10 properties"
  },
  {
    ability: "Good"
    value: "customer has 5 properties"
  },
  {
    ability: "average"
    value: "customer has 3 properties"
  }
]

Then I again want to use above object to iterate over it and bind its values to dropdown. So my drop-down will display "value" to end user and DB will have "ability". I am trying below code snippet but its not giving expected output. Something I am doing wrong here.

var object = [{
    ability: "Strong",
    name: "STRENGTH",
    value: "customer has 10 properties",
    type: "MultiChoice"
  },
  {
    ability: "Good",
    name: "STRENGTH",
    value: "customer has 5 properties",
    type: "MultiChoice"
  },
  {
    ability: "average",
    name: "STRENGTH",
    value: "customer has 3 properties",
    type: "MultiChoice"
  }
]

let multiChoiceResult = [];
let ability, value
Object.entries(object).map(([key, value]) => {
  ability = value.ability;
  value = value.value;
  multiChoiceResult.push(ability, value);
});
console.log(multiChoiceResult);

I made you a snippet. Please fix the console error - you do not have rangesetDeduced, rangesetValue) — mplungjan
– mplungjan, Commented Jun 2, 2020 at 11:57
Just to note - your object is not an object, it's an array.. of objects! .. and actually calling an object 'object' might get a tad confusing. — Bryan
– Bryan, Commented Jun 2, 2020 at 12:00
@mplungjan code snippet fixed. Can you please help what wrong I am doing here. — Nilesh
– Nilesh, Commented Jun 2, 2020 at 12:01

Daan · Accepted Answer · 2020-06-02 12:10:47Z

2

Your solution expects an object as input. But object actually is an array. You can simply use the map function on the given items as follows:

var object = [
  {
    ability: "Strong",
    name: "STRENGTH",
    value: "customer has 10 properties",
    type: "MultiChoice"
  },
  {
    ability: "Good",
    name: "STRENGTH",
    value: "customer has 5 properties",
    type: "MultiChoice"
  },
  {
    ability: "average",
    name: "STRENGTH",
    value: "customer has 3 properties",
    type: "MultiChoice"
  }
];

console.log(
    object.map((item) => ({ ability: item.ability, value: item.value }))
)

edited Jun 2, 2020 at 12:10

Daan

2,8101 gold badge22 silver badges41 bronze badges

answered Jun 2, 2020 at 11:58

Benjamin Eckardt

7286 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nilesh Over a year ago

Thanks for this code. It has worked fine and I got an object in required format. like this. [ 0 : { ability: "Strong" ,value: "customer has 10 properties" } 1 : { ability: "Good", value: "customer has 5 properties" } 2 : { ability: "average", value: "customer has 3 properties" } ] But how can I use this object to bind the values to dropdown. There I am stuck really.

Benjamin Eckardt Over a year ago

@Nilesh You are welcome. Would be great if you'd accept it as the answer to your problem.

Nilesh Over a year ago

I need to show value's value to end user and its ability value will be saved in back end.

Benjamin Eckardt Over a year ago

Since I haven't seen any code in that regards, it's hard to help you with that. How about you give it a try with the step you got further now and in case you are stuck again, you can ask a new question for that precise problem.

mplungjan Over a year ago

@Nilesh I added a select to my answer

Darshil Mehta · Accepted Answer · 2020-06-02 11:59:26Z

1

As in your code snippet, it's an array of objects. So you can use the map function to iterate it.

object.map((item) => ({ ability: item.ability, value: item.value }));

answered Jun 2, 2020 at 11:59

Darshil Mehta

1221 silver badge7 bronze badges

Comments

mplungjan · Accepted Answer · 2020-06-02 13:00:14Z

The map can be vastly simplified

https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand

var object = [{ ability: "Strong", name: "STRENGTH", value: "customer has 10 properties", type: "MultiChoice" },
  { ability: "Good", name: "STRENGTH", value: "customer has 5 properties", type: "MultiChoice" },
  { ability: "average", name: "STRENGTH", value: "customer has 3 properties",  type: "MultiChoice" }]

let multiChoiceResult = Object.values(object)
  .map(({ability, value}) => ({ability, value}));

console.log(multiChoiceResult);

For a drop down you can do

var object = [{ ability: "Strong", name: "STRENGTH", value: "customer has 10 properties", type: "MultiChoice" },
  { ability: "Good", name: "STRENGTH", value: "customer has 5 properties", type: "MultiChoice" },
  { ability: "average", name: "STRENGTH", value: "customer has 3 properties",  type: "MultiChoice" }]

let multiChoiceResult = Object.values(object)
  .map(({ability, value}) => `<option value="${ability}">${value}</option>`);

document.getElementById("abilities").innerHTML+=multiChoiceResult.join("")

<select id="abilities" name="abilities">
  <option value="">Please select</option>
</select>

Collectives™ on Stack Overflow

iterate over array of objects and fetch only specific key to form a new array of object in react js

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related