Question 53828 in Javascript Question posted in
A very good W3school tutorial can be found here.

Transform Object to array with new keys in reactJs – Javascript

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 }))
    )
}
Tags:

6

Answers


  1. 0 
    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)
    Login or Signup to reply.
  2. 0

    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] };
}
    Login or Signup to reply.
  3. 0

    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}))
    Login or Signup to reply.
  4. 0

    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);
    Login or Signup to reply.
  5. 0

    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 }
    Login or Signup to reply.
  6. 0

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

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search