Unhandled Rejection (TypeError): Cannot read property 'children' of undefined

Question

I am trying to fetch data from rest api using axios and i want to store data in an array and append new property children but i am getting error here is my code:

var categoriesTree = {};
axios.get('https://akkar.market/wp-json/wp/v2/job_listing_category?per_page=100')
.then(response => {
  categoriesTree = response.data
  categoriesTree.forEach(category => {
    if (category.parent === 0) {
      if (!(category.id in categoriesTree)) {
        categoriesTree[category.id] = {'name': category.name, 'children': []};
      } else {
        categoriesTree[category.id]['name'] = category.name;
      }
    } else {
      if (!category.parent in categoriesTree) {
        categoriesTree['parent'] = {'name': '', 'children': []};
      }
      categoriesTree['parent']['children'].push({'name': category.name, 'id': category.id});
    }
  })
})
console.log(categoriesTree)

i am getting this error:

My guess is that categoriesTree.parent is not worth 0 but is not worth an Array aswell. — Orelsanpls

T.J. Crowder T.J. Crowder · Accepted Answer · 2018-10-01T09:36:36

It looks like there are a couple of problems:

In !category.parent in categoriesTree, you'd taking the logical NOT of category.parent (which will be true or false) and using that result in the in operation. You need () around the in expression: !(category.parent in categoriesTree)
Even with the revision, that checks for a property whose name is the value of category.parent in categoriesTree. But then you create a property called parent, not a property with the name from category.parent.

If the property is supposed to be the value of category.parent, use that instead of 'parent':

if (!(category.parent in categoriesTree)) {
    categoriesTree[category.parent] = {'name': '', 'children': []};
}
categoriesTree[category.parent]['children'].push({'name': category.name, 'id': category.id});

If it's supposed to be called parent (literally), then use that consistently instead:

if (!("parent" in categoriesTree)) {
    categoriesTree.parent = {'name': '', 'children': []};
}
categoriesTree.parent['children'].push({'name': category.name, 'id': category.id});

If categoriesTree will either not have a property called x or the property will have an object reference as a value, you can use if (!categoriesTree.x)rather thanif (!("x" in categoriesTree))`. Applying that to the two options above:

if (!categoriesTree[category.parent])) {
    categoriesTree[category.parent] = {'name': '', 'children': []};
}
categoriesTree[category.parent]['children'].push({'name': category.name, 'id': category.id});

If it's supposed to be called parent (literally), then use that consistently instead:

if (!categoriesTree.parent)) {
    categoriesTree.parent = {'name': '', 'children': []};
}
categoriesTree.parent['children'].push({'name': category.name, 'id': category.id});

Unhandled Rejection (TypeError): Cannot read property 'children' of undefined

2 Answers