-1

I have an object:

const data = {
  1: "apples",
  2: "bananas",
  3: "cherries"
}

I want to run through this items and use them in rendering JSX. If it was typical array I would use map() but now it gives me an error :

"Property 'map' doesnot exists..."

what can I do in this case? thank you in advance

JeremyBearimy
  • 52
  • 5
  • Does this answer your question? [How do I loop through or enumerate a JavaScript object?](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) – Shea Hunter Belsky Jul 13 '22 at 02:39

4 Answers4

1

Yeah, it is giving you that error since map() method can only be run on arrays and data is an object.

Rather change your code to

Object.entries(data).map(([key, value]) => console.log(key, value))

For fetching only the keys

Object.keys(data).map(key => console.log(key))

For fetching only the values

Object.values(data).map(value => console.log(value))
Mridul Gupta
  • 807
  • 1
  • 6
  • 8
  • Does this return data sorted by keys in ascending order? How can I keep order which I have specified in objec. ex. if I have const data ` { 3 : "apples", 1: "bananas", 2: "cherries" }` I want to keep 3, 1, 2 order – JeremyBearimy Jul 11 '22 at 12:07
  • https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order , i hope this link will answer your question – Mridul Gupta Jul 11 '22 at 12:26
1
for (const key in data) {
    console.log(`${key}: ${data[key]}`);
}

good to know

Object.keys(data) will get you array of keys -> ['1', '2', '3']

Object.values(data)will get you array of values -> ['apples', 'bananas', 'cherries']

Mohammed Naguib
  • 529
  • 4
  • 7
0

You could consider using Object.values to turn an object into an array before mapping it to UI

const data = {
  1: "apples",
  2: "bananas",
  3: "cherries"
}

console.log(Object.values(data))
Ryan Le
  • 7,708
  • 1
  • 13
  • 23
0

You could use Object.entries

return (
        <div>
            {
                Object.entries(data).map(([key, value]) => {
                    <p>{key}: {value}</p>
                })
            }
        </div>
    );
Chapi Menge
  • 106
  • 8
  • Does this return data sorted by keys in ascending order? How can I keep order which I have specified in objec. ex. if I have const data ` { 3 : "apples", 1: "bananas", 2: "cherries" }` I want to keep 3, 1, 2 order – JeremyBearimy Jul 11 '22 at 12:02
  • I think object in js are sorted by default. if you are reading from json file it will automatically sort the value when you load it if the json is an Object(dictionary like object) { .... } – Chapi Menge Jul 11 '22 at 12:39
  • Is there any other alternatives to keep key value pairs? as long as I want to keep specific order of keys when I iterate over them – JeremyBearimy Jul 11 '22 at 12:43
  • Map are garanteed to keep order of insertion but idk how you are going to achieve that when you load from json. But the best way to achieve it is giving the order in the data and that would actually better because you can sort it using that key. – Chapi Menge Jul 11 '22 at 12:54
  • actually I'm not loading it from Json, data object is hardcoded in code and I'm just looking if there is any other way to keep key value pairs and to maintain the ordering while iterating over it – JeremyBearimy Jul 11 '22 at 12:58
  • in that case you can use Map like this ```const second = new Map([ [1, "apples"], [2, 'bananas",'] ]) ``` it will preserve the order – Chapi Menge Jul 11 '22 at 13:47