I am using .map() to cycle through an object and places some values in to a 2nd object.

I am doing this as such:

function convertGraphItems(name, data) {
  return ({ name, data, type: 'bar', stack: true });
}

var generatedArr = [...dataByAccountName.entries()].map(convertGraphItems);

However, I seem to be unable to assign 'name' and 'data' to their respective keys.

I have tried return ({ name: name, data: data, type: 'bar', stack: true }); but this does not achieve what I want.

My desired result should look like:

[
    {
        "name": "Savings",
        "data": [
            5474.18,
            114031.26,
            127890.72
        ],
        "type": "bar",
        "stack": true
    }
]

But my current result is:

[
    {
        "name": [
            "Savings",
            [
                5474.18,
                114031.26,
                127890.72
            ]
        ],
        "data": 0,
        "type": "bar",
        "stack": true
    }
]

Would anyone know how I could assign data and name to their respective keys?

EDIT: source array looks like:

[
    {
        "key": "Savings",
        "value": [
            5474.18,
            114031.26,
            127890.72
        ]
    },
]

CodePudding user response：

You are passing convertGraphItems function into map and you are expecting name as key and data as value, but this is not the case here.

In map the first argument is the value and second is the index. You have to make convertGraphItems compatible so you can pass value externally as:

[...dataByAccountName.entries()].map(function ([_, { key, value }]) {
  return convertGraphItems(key, value);
});

const dataByAccountName = [
  {
    key: "Savings",
    value: [5474.18, 114031.26, 127890.72],
  },
];

function convertGraphItems(name, data) {
  return { name, data, type: "bar", stack: true };
}

var generatedArr = [...dataByAccountName.entries()].map(function ([, v]) {
  const { key, value } = v;
  return convertGraphItems(key, value);
});
console.log(generatedArr);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you have the source array already available as you included in the question, you don't need a separate function for it.

const sources = [{
  "key": "Savings",
  "value": [5474.18, 114031.26, 127890.72]
}]
const parsedData = sources.map(({key, value}) => ({
  name: key,
  data: value,
  type: 'bar',
  stack: true
}));

console.log(parsedData)

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The first two arguments passed to the Array.prototype.map() callback are

• element

  The current element being processed in the array.

• index

  The index of the current element being processed in the array.

It seems unlikely that you'd want data to be the index.

const dataByAccountName = [{"key":"Savings","value":[5474.18,114031.26,127890.72]}]

const generatedArr = dataByAccountName.map(({ key: name, value: data }) => ({
  name,
  data,
  type: "bar",
  stack: true
}))

console.log(generatedArr)

.as-console-wrapper { max-height: 100% !important; }

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

---

If you're using something else that produces entries (like a Map), then this is how you'd map it

const dataByAccountName = new Map()
dataByAccountName.set("Savings", [
  5474.18,
  114031.26,
  127890.72
])

const generatedArr = Array.from(dataByAccountName, ([ name, data ]) => ({
  name,
  data,
  type: "bar",
  stack: true
}))

console.log(generatedArr)

.as-console-wrapper { max-height: 100% !important; }

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I've used Array.from() since IMO it looks better than [...map.entries()].map() and achieves exactly the same thing.

Note that the first (and only) argument passed to the mapping callback is a destructured array as opposed to two separate args.