How to print array key and value using map function

Question

I'm trying to print the key and value of an array but i can't get it done, what's the best way to do this? but i'd like to use map but any other better method is also ok, I'd also like to be able to track the index of the array.

colorArray = [0:0: 'Red', 0:1: 'Blue', 0:2: 'Green', 0:3: 'Orange']
{colorArray.map((val, index) => {
     <div> 
       <div className='value-img' >
         <span>(index+1)"."+val+", "key+", "index<span>
       </div>
    </div>

}

and I want the result below

Red, 0:0, 0
Blue, 0:1, 1
Green, 0:2, 2
Orange, 0:3, 3

How can I achieve this result above. Thanks

What you have provided is not valid JavaScript, therefore the question cannot be answered. — Mushroomator
– Mushroomator, Commented Oct 14, 2022 at 8:03
I assume this question should also have the reactjs tag, but it's not quite clear from the code given. — 3limin4t0r
– 3limin4t0r, Commented Oct 14, 2022 at 8:09

Anu · Accepted Answer · 2022-10-14 08:23:51Z

2

First of all the array is not syntactically correct. if you wish to maintain the same key-value pair for some reason, it cannot be done with array, you can go for Object

    var colorObj = {['0:0']: 'Red', ['0:1']: 'Blue', ['0:2']: 'Green', ['0:3']: 'Orange'}
    Object.entries(colorObj).map((c)=>console.log(c[0],c[1]))

Or better a 2D array.

     var colorArray = [['0:0', 'Red'],['0:1', 'Blue'],['0:2', 'Green'],['0:3', 'Orange']]
    colorArray.map((c)=>console.log(c[0],c[1]))

Hope this helps.

answered Oct 14, 2022 at 8:23

Anu

3891 silver badge4 bronze badges

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

1 Comment

sam Over a year ago

thanks it's straigth forward enough I'd prefer 2d array method

tarkh · Accepted Answer · 2022-10-14 08:13:58Z

0

For this task you can use Object, instead of Array, so it will utilize key -> value pairs. Check inline comments:

// You can use Object instead
// Here we define key -> value pairs
const colorObject = {
  "0:0": "Red",
  "0:1": "Blue",
  "0:2": "Green",
  "0:3": "Orange"
}

// Counter to count iterations
let counter = 0;

// Iterate Object with for loop
// and increase counter each iteration
for(const el in colorObject) {
  // Form your html as you need
  // For now we will just print it to console
  console.log(`
  <div> 
    <div className='value-img' >
      <span>${counter+1} ${colorObject[el]}, ${el}, ${counter}<span>
    </div>
  </div>
  `);
  // Increase counter
  counter++;
}

answered Oct 14, 2022 at 8:13

tarkh

2,5691 gold badge11 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to print array key and value using map function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related