2

I have props that need to be destructured in a component. As it comes from API, it is actually an object from which I would like to take objects from 0 to 39. However, when I try to destructure them this way:

 const { 0, ...39: weatherData } = this.props;

VSCode gives me an error of unexpected token because of the comma. How can I destructure the props without having to enumerate every single object?

llievredemars
  • 140
  • 1
  • 10
  • 3
    Object keys are always strings. Even if those strings contain numeric characters, they are still strings. – Scott Marcus Jun 11 '18 at 16:40
  • @ScottMarcus, okay, so how to destructure them if I get an error regarding the comma? – llievredemars Jun 11 '18 at 16:49
  • 1
    Are you trying to get all the values for a range of keys? I can't tell what you expect the `...` to do here. – loganfsmyth Jun 11 '18 at 17:06
  • Is this object actually an array? It really should be. – Bergi Jun 11 '18 at 17:25
  • Even if this wasn't with numeric properties, destructuring doesn't work like that. If you want to create a new object with only a subset of properties, you can do something like https://stackoverflow.com/q/25553910/218196 . – Felix Kling Jun 11 '18 at 18:32
  • @loganfsmyth, I was actually trying to spread all the keys not to enumerate them one by one – llievredemars Jun 12 '18 at 07:53
  • @Felix Kling, great, thank you. I did not know that I could actually use this method to destructure them. – llievredemars Jun 12 '18 at 07:55
  • @llievredemars Spread them where? It would help a lot to have some clear example input and output values. The syntax `const {0} =` for instance would try to create a local variable named `0` which isn't allowed, and `...39: weatherData` is also not a thing. – loganfsmyth Jun 12 '18 at 15:58

2 Answers2

0

You could take an array as target for the object, which takes only the numerical indices and slice it to the wanted length.

const array = Object
    .assign([], { abc: 1, 0: 100, 1: 101, 39: 139, 40: 140 })
    .slice(0, 40);

console.log(Array.isArray(array));
console.log(array);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Nina Scholz
  • 323,592
  • 20
  • 270
  • 324
0

In javascript even if you created your object using a number as a key, the keys are always strings, take the following example:

const obj = {
  [1]: 1,
  anotherThing: 2
};

console.log(Object.keys(obj))

However, since '1' or 1 are literals, using them in the destructuring assignment is not possible, in order to use the numerical keys you would have to convert your object to iterable or map properties manually,

The easiest way to convert your object to iterable is to use Object.assign with an array, since an array is also an object you can do the following:

const arr = Object.assign([], obj);

And to fulfill your purpose, something like:

const obj = {
  [0]: 0,
  [1]: 1,
  wheaterData: 'wheaterData',
  anotherNonNumericProp: '1'
};

const arrOfNumericProps = Object.assign([], obj);

const [prop0, prop1] = arrOfNumericProps;

const {wheaterData,
  ...rest
} = arrOfNumericProps;

console.log(prop0);
console.log(prop1);

console.log(wheaterData);
console.log(rest);
J. Pichardo
  • 2,819
  • 18
  • 36