ES6 spread syntax on array of objects, and getting object properties

Question

I have an array of objects as follows:

const data = [
  {
    'name': 'A',
    'v0': true,
    'values': [
      { 'v': true, 'k': 1 },
      { 'v': false, 'k': 2 },
      { 'v': true, 'k': 3 },
      { 'v': false, 'k': 4 }
    ]'
  },
  ...
]

the function below extracts the params name, v0 and values from the data objects and is used to render a row of a table by creating an array of cells with properties.

v0 is a boolean, and depending on its value, the render function may apply some styling to the cell.

This works fine when the number of values is predetermined, as they can be listed: v0, v1 ...

However, I have an array of values instead, and would like to spread it, while applying a unique key, as shown in v0 below:

const renderBodyRow = ({ name, v0, values }) => ({
  cells: [
    name,
    v0 ? { key: '0', content: v0, color: 'green' } : { key: '0', content: v0, color: 'red' },
    ...values //  need to apply the same, but on the values array

  ]
})

One way is to have values as a array of booleans: values: [true, false, true, false]

This would require the creation of a unique key inside the renderBodyRow function. Is this possible?

Or define the values array as an array of objects with value and key. In which case, how would spread syntax be able to access the properties of those objects?

Any idea on how to achieve either (or both) of these with spread syntax?

Thanks

could you please share simple input (with v0 and v1) and output of your input? — Tolgahan Albayrak
– Tolgahan Albayrak, Commented Feb 8, 2017 at 0:03

castletheperson · Accepted Answer · 2017-02-08 00:08:03Z

4

You will need to use Array.prototype.map in order to convert each value into an object with the desired style. You can make values a boolean array, and then use the index of each value as the unique key.

const data = [{
  name: 'A',
  values: [true, true, false, true, false]
}];

const renderBodyRow = ({ name, values }) => ({
  cells: [
    name,
    ...values.map((val, index) => ({
      key: String(index),
      content: val,
      color: val ? 'green' : 'red'
    }))
  ]
});

console.log(data.map(renderBodyRow));

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

edited Feb 8, 2017 at 0:08

answered Feb 7, 2017 at 23:56

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

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

5 Comments

Bergi Over a year ago

I guess you need to use String(index + 1) though to match the first key

castletheperson Over a year ago

@Bergi Yeah, though it appeared to be they wanted the output to be 0-indexed.

castletheperson Over a year ago

@Bergi Ah, yes we're on the same page. My code corresponded with the boolean array alternative that the OP mentioned, while yours corresponds with the structure that's in the first code block. Between our two answers, both structures are covered.

Khorkhe Over a year ago

@4castle what i seem to not understand here: is values.map applied before the spread? for some reason i thought the spreading was applied first, so did not try to apply map on it.

Bergi Over a year ago

@Khorkhe No, first all the array elements in the literal are evaluated, then the array is constructed and filled where the spread syntax is taken into account.

Bergi · Accepted Answer · 2017-02-08 00:35:33Z

3

You seem to be looking for

function renderBodyCell({ k, v }) {
  return {
    key: k,
    content: v,
    color: v ? 'green' : 'red'
  };
}
function renderBodyRow({ name, v0, values }) {
  return {
    cells: [
      name,
      renderBodyCell({ k: '0', v: v0 }),
      ... values.map(renderBodyCell)
    ]
  };
}

edited Feb 8, 2017 at 0:35

answered Feb 8, 2017 at 0:05

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

Mulan Over a year ago

what is v0 bound to in renderBodyCell ?

Bergi Over a year ago

Ooops, I meant v of course. Happens when copy-pasting for refactoring...

Khorkhe Over a year ago

@Bergi thanks! This answer and the one below it are similar in notion, accepted the second one

Collectives™ on Stack Overflow

ES6 spread syntax on array of objects, and getting object properties

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related