why am i getting 'i is not defined' error from a simple for loop in vue.js component script?

73
June 20, 2019, at 05:50 AM

I'm trying to taking an array, order that array by version, and then moving all versions that begin with 'ipad' to the end of the list.

snippet from single file vue.js component:

  computed: {
    orderedUsers: function () {
      let newArray = sortBy(this.jobs, 'version').reverse()
      for (i in newArray) {
        if (i.version.startsWith('iPad')) {
          newlist.push(newlist.splice(i, 1)[0]);
        }
      }
      return newArray
  },

error:

vue.runtime.esm.js?e832:619 [Vue warn]: Error in render: "ReferenceError: i is not defined"

Not sure if this is a js question or a vue.js question

Answer 1

Try to add let i before using it in the for loop. See example below.

for (let i in newArray) { 
  if (i.version.startsWith('iPad')) { 
    newlist.push(newlist.splice(i, 1)[0]); 
  } 
}

Answer 2

Several problems with the original code.

  1. The missing const/let on i
  2. in loop should be of. Or maybe not. The following lines seem to assume that i is both the index and the entry.
  3. newlist isn't defined.
  4. It seems to be trying to mutate an array whilst iterating over it.

I think you're looking for something more like this.

const newArray = sortBy(getData(), 'version').reverse() 
const nonIPads = [] 
const iPads = [] 
 
for (const entry of newArray) { 
  if (entry.version.startsWith('iPad')) { 
    iPads.push(entry) 
  } else { 
    nonIPads.push(entry) 
  } 
} 
 
const all = [...nonIPads, ...iPads] 
 
console.log(all) 
 
function sortBy(array, property) { 
  return [...array].sort((a, b) => { 
    const valueA = a[property] 
    const valueB = b[property] 
 
    if (valueA === valueB) { 
      return 0 
    } 
 
    return valueA < valueB ? -1 : 1 
  }) 
} 
 
function getData() { 
  return [ 
    {version: 'f'}, 
    {version: 'a'}, 
    {version: 'd'}, 
    {version: 'iPad 3'}, 
    {version: 'iPad 1'}, 
    {version: 'iPad 4'}, 
    {version: 'e'}, 
    {version: 'c'}, 
    {version: 'g'}, 
    {version: 'b'}, 
    {version: 'iPad 2'} 
  ] 
}

READ ALSO
How can I filter by 2 different properties?

How can I filter by 2 different properties?

I am attempting to filter an array of objects before sending it to the backendIt should go to the backend with NO falsy values

68
FireFox keyboard active button

FireFox keyboard active button

Having a UI that is meant to be keyboard friendlyIt has various controls in the for of buttons etc

44
Get JavaScript alert in case of specific words on web page

Get JavaScript alert in case of specific words on web page

Is it possible to get a JavaScript alert when there is a given word (or words) on a currently visited web page? I have searched in all the Google extensions, but I haven't found it unfortunately

68
How to pass a form data to a client side function (google.scripts.run) and return result to HTML?

How to pass a form data to a client side function (google.scripts.run) and return result to HTML?

I'm trying to take an ID from a form and run that ID against a function in CODEgs that checks the spreadsheet for that ID and returns the name back in the HTML

66