Invalid attempt to spread non-iterable instance on an object

Question

 data: [],

 ...

I load data from API call into data array. Then I try to arrange the data array into a map which can consist of a key, value pairs (value can be itself array) using below.

    const dataMap = {};
    for (let i = 0; i < data.length; i+=1) {
      const key = data[i].product.name;
      const value = data[i];

      if (key in dataMap) {
        dataMap[key].push(value);
      } else {
        dataMap[key] = [value];
      }
    }

But when I do the following I get the following error. What I am doing wrong?

{[...dataMap].map(([key, value]) => {}

Invalid attempt to spread non-iterable instance

This is my dataMap

DataMap is correctly calculate but when i iterate using the following code

Object.entries(dataMap).map((key, value) => {
          console.log(key);
          console.log(value)
 })

it prints out the following. Value is some index which i dont understand why ? Value should be an array. My dataMap is a key, value (value is an array)

Please don't post images, please explain what does it means "for me it's wrong" — Dennis Vash, Jul 28 '19 at 23:56
@DennisVash: I mean why Object.entries value is 0,1,2,3,4.. why not Array(1) value. — Saurabh Kumar, Jul 29 '19 at 00:02

score 11 · Accepted Answer · edited Jul 30 '19 at 07:41

Your problem has nothing to do with react/react-native, its plain javascript:

dataMap is already an object, so you only can spread its entries.

// An empty object assign.
const dataMap = {};

// Shallow copy
const objShallowCopy = {...dataMap};

Also, you can rewrite your for-loops using reduce():

const dataSource = [
  { product: { name: 1 }, value: 10 },
  { product: { name: 1 }, value: 100 },
  { product: { name: 2 }, value: 30 },
  { product: { name: 2 }, value: 20 }
];

const dataMap = dataSource.reduce((acc, curr) => {
  const prodArr = acc[curr.product.name];
  return { ...acc, [curr.product.name]: prodArr ? [...prodArr, curr] : [curr] };
}, {});

console.log(dataMap);

Moreover, Object.entries returns an entries array so you need to fix your loggings:

// Bug
Object.entries(dataMap).map((key, value) => {
  console.log(key);
  console.log(value);
});


// Good
Object.entries(dataMap).map((([key, value]), index) => {
  console.log("key", key);
  console.log("value", value);
  console.log("index", index);
});

I updated the answer, PLEASE don't add questions after someone giving an answer, post another question instead — Dennis Vash, Jul 28 '19 at 23:59

score 4 · Answer 2 · answered Jul 28 '19 at 23:12

4

dataMap is object, not an array. You cannot do [...dataMap].

You can convert dataMap to arrays of keys with Object.keys(dataMap) or to array of values with Object.values(dataMap)

So erroneous line should look like

Object.keys(dataMap).map(key => /* dataMap[key] will be value */)

answered Jul 28 '19 at 23:12

Fyodor Yemelyanenko

11,264
1
30
38

Oh yes... correct. I see now that dataMap has duplicated each key. What can be the reason ? – Saurabh Kumar Jul 28 '19 at 23:30
Please, add samle of input `data` and output result you want to get – Fyodor Yemelyanenko Jul 28 '19 at 23:51

Invalid attempt to spread non-iterable instance on an object

2 Answers2

Linked