Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method

Question

In my nuxtjs project, I have 2 arrays of objects defined in data like below:

allCampusObj: [{
         name: "allCampus",
         title: "Campus",
      }],
      deptSummaryFieldsArr:[
        {
          name: "sisSchoolTitle",
          title: "School",
          formatter(value) {
            return value.length > 3 ? `${value.slice(0, 3)}...` : `${value}`;
          }
        },
        { 
          name: "sisDeptTitle",
          title: "Department",
          formatter(value) { 
            return "";
          }
        }, 
        {
          name: "secAll",
          title: "Courses"
        },
        {
          name: "secNSub",
          title: "Not Submitted"
        },
        {
          name: "nsp-slot",
          title: "% Not Submitted"
        },
        {
          name: "secSub",
          title: "Submitted"
        },
        {
          name: "sp-slot",
          title: "% Submitted"
        }
      ],
      deptSummaryFields: [
        ...this.allCampusObj, 
        ...this.deptSummaryFieldsArr
        ]

I am getting the error saying Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method. Even if I have used spread operator on arrays

Have you tried removing ```formatter``` function from an ```deptSummaryFieldsArr``` variable and then try again. Might be because its an function hence spread operator is not able to inherit it. — Himanshu Saxena, Apr 20 '21 at 10:13

score 0 · Answer 1 · answered Apr 20 '21 at 11:00

You can't directly reference this in javascript initializer notation unless it is in a function-like value.

As noted in the answers to this question, there are several ways to get around this limitation. Below is one of many approaches. Note, as mentioned in the comments, you have a syntax error with your function declaration, which should be written as formatter : (value)=> {return "";}

const obj = {
  allCampusObj: [{
    name: "allCampus",
    title: "Campus",
    formatter : (value)=> {
        return "";
      }
  }],
  deptSummaryFieldsArr: [
    {
      name: "sisSchoolTitle",
      title: "School",
      formatter: (value) => {
        return value.length > 3 ? `${value.slice(0, 3)}...` : `${value}`;
      }
    },
    {
      name: "sisDeptTitle",
      title: "Department",
      formatter:(value)=> {
        return "";
      }
    },
    {
      name: "secAll",
      title: "Courses"
    },
    {
      name: "secNSub",
      title: "Not Submitted"
    },
    {
      name: "nsp-slot",
      title: "% Not Submitted"
    },
    {
      name: "secSub",
      title: "Submitted"
    },
    {
      name: "sp-slot",
      title: "% Submitted"
    }
  ],
}
const obj2 = {
  deptSummaryFields: [
    ...obj.allCampusObj,
    ...obj.deptSummaryFieldsArr
  ]
}
obj.deptSummaryFields = obj2.deptSummaryFields;
console.log(obj);

my arrays were defined in data object (nuxt js) only, so "this" is not creating any problem, also why to make object for obj2? why not array? — developer, Apr 20 '21 at 11:23
@developer It *does* create problems, `this.allCampusObj` is `undefined`. Please read the linked question. But yes, the `obj2` is unnecessary, one could have directly created the array and assigned it to `obj.deptSummaryFields`. — Bergi, Apr 21 '21 at 00:21

Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method

1 Answers1