Transform Object to array with new keys in reactJs [duplicate]

Question

I have an output from my return Object like the below:

{
    "note_1": 14,
    "note_2": 0,
    "note_3": 5,
    "note_4": 17,
    "note_5": 22
}

I need to transform this into a new Array where i would need to add values from the above into new keys like the below structure and order reversed

[
    {note: 5, count: 22},
    {note: 4, count: 17},
    {note: 3, count: 5},
    {note: 2, count: 0},
    {note: 1, count: 14}
]

I have tried to target the last character of the object key to get the note by using the charAt() function (dont know if it's the best way to do this!)

let distribution = [];

if (props.distribution()) {
    const notes = Object.values(props.distribution).map(item => {
        return item.charAt(item.length-1)
    });
    distribution = Array.from(
        notes.reduce((r, c) => r, new Map()),
        (([note, count]) => ({ note, count }))
    )
}

Answer 1

const obj = {
    "note_1": 14,
    "note_2": 0,
    "note_3": 5,
    "note_4": 17,
    "note_5": 22
}

const transformed = Object.keys(obj).map(key => {
  const sp = key.split('_');
  const noteVal = sp[1];
  return {
    note: Number(noteVal),
    count: Number(obj[key])
  };
})
console.log(transformed)

Answer 2

This should do it:

const input = {
  note_1: 14,
  note_2: 0,
  note_5: 22,
  note_4: 17,
  note_3: 5,
};

const output = Object.keys(input).map((key) => {
  return { note: key.split('_')[1], value: input[key] };
}

Answer 3

This is an option to accomplish that. I suggest you to use slice(-1) instead of charAt to get the last character.

let source = {"note_1":14, "note_2":0, "note_3":5, "note_4":17, "note_5":22 }

Object.entries(source).reverse().map(([k,v])=>({note:k.slice(-1), count:v}))

---

Edit:

You can actually use at(-1), it is implemented in practically all relevant browsers now.

Object.entries(source).reverse().map(([k,v])=>({note:k.at(-1), count:v}))

If your note numbers can grow higher than 10, you'd better split('_')[1] and parse to number

Object.entries(source).reverse().map(([k,v])=>({note:Number(k.split('_')[1]), count:v}))

Answer 4

Using reduce() on Object.entries() where we split() the key to get the everything behind note_

const data = {"note_1": 14, "note_2": 0, "note_3": 5, "note_4": 17, "note_5": 22 };

const res = Object.entries(data).reduce((p, [ key, value ]) => [ ...p, { 
    note: +key.split("_")[1], 
    count: +value
}], []);

console.log(res);

Answer 5

React JS does need to be mentioned here... You only need JavaScript

for, Objecet.keys, split methods you need to use for this challenge.

Answer 6

This works:

    const obj = {
        "note_1": 14,
        "note_2": 0,
        "note_3": 5,
        "note_4": 17,
        "note_5": 22,
    }

    const array = Object.entries(obj).map(arr => {
        return {
            note: +arr[0].charAt(5),
            count: arr[1],
        }
    }).reverse()

OUTPUT:

0: Object { note: 5, count: 22 }
​
1: Object { note: 4, count: 17 }
​
2: Object { note: 3, count: 5 }
​
3: Object { note: 2, count: 0 }
​
4: Object { note: 1, count: 14 }