How to loop through an array an put create an array of objects using react and javascript?

Question

i want to loop through an array elements and create an array of objects with its values.

below is the array example which comes from querying from an api.

const array = [
    "first",
    "second",
]

now i want to create an array of objects like below

const arr_obj = [
    {
         label: "first",
         value: "first",
     }
     {
         label: "second",
         value: "second",
      }
  ]

i have tried like below

const arr_obj = React.useMemo(() => {
    const output = arr.forEach(item => { //error
        return {
            label: item,
             value: item,
         }
     }, [arr]});

but this gives error arr could be possibly undefined or null and also i think this is not the way to create an array of objects with label, value pairs from the array elements.

could someone help me with this. thanks.

Spectric · Accepted Answer · 2022-01-23 16:50:33Z

1

Use Array.map:

const array = [
  "first",
  "second",
]

const res = array.map(e => ({
  label: e,
  value: e
}))
console.log(res)

answered Jan 23, 2022 at 16:50

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

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

2 Comments

stackuser Over a year ago

thanks how can i check if array is null or undefined before mapping? i get error object could be possibly null | undefined.

Spectric Over a year ago

@stackuser You can wrap the map in an if statement: if (array != null){ /* map */ }

James · Accepted Answer · 2022-01-23 16:51:23Z

0

Why not try this one?

const array = [
  "first",
  "second",
]
let arr_obj = []
for (let i in array) {
  arr_obj.push({
    label: array[i],
    value: array[i],
  })
}
console.log(arr_obj)

answered Jan 23, 2022 at 16:51

James

2,7872 gold badges9 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to loop through an array an put create an array of objects using react and javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related