I am getting following error TypeError: Cannot read property 'sort' of undefined when I am fetching the data from API and I want to sort and display the data, my sort function works with local static data but not with endpoint.

Below is the function for sorting

dynamicSort(property) {
        var sortOrder = 1;
        if(property[0] === "-") {
            sortOrder = -1;
            property = property.substr(1);
        }
        return function (a,b) {
            if(sortOrder == -1){
                return b[property].localeCompare(a[property]);
            }else{
                return a[property].localeCompare(b[property]);
            }        
        }
    }

Below is my render method

render() {
let data = this.props.brands.all_brands
data.sort(this.dynamicSort("name"));
console.log(data);
}

Below is my JSON Format

{
"all_items": [
{"name": "Banana"},
{"name": "Cat"},
{"name": "Apple"}
]
}

I am getting following error TypeError: Cannot read property 'sort' of undefined when I am fetching the data from API and I want to sort and display the data, my sort function works with local static data but not with endpoint.

Below is the function for sorting

dynamicSort(property) {
        var sortOrder = 1;
        if(property[0] === "-") {
            sortOrder = -1;
            property = property.substr(1);
        }
        return function (a,b) {
            if(sortOrder == -1){
                return b[property].localeCompare(a[property]);
            }else{
                return a[property].localeCompare(b[property]);
            }        
        }
    }

Below is my render method

render() {
let data = this.props.brands.all_brands
data.sort(this.dynamicSort("name"));
console.log(data);
}

Below is my JSON Format

{
"all_items": [
{"name": "Banana"},
{"name": "Cat"},
{"name": "Apple"}
]
}

• javascript
• json
• reactjs
• sorting
• ecmascript-6

• can you share the props you are passing to the ponent? It appears that this.props.brands does not contain an all_brands property – Robin Zigmond Commented Jan 5, 2019 at 13:22

2 Answers 2

JS tries to call the sort() method on a variable which is undefined at this time. I guess that your props are not passed at this time. If you are sure that you pass them to the ponent any time, you can simply add an if check:

render() {
  let data = this.props.brands.all_brands
  if (data) data.sort(this.dynamicSort("name"));
  console.log(data);
  // return your template
}

Remote data is asynchronous, meaning it takes time to get it, so you need to treat the case in which you haven't got it yet:

all_brands is undefined, until the remote data is fetched:

render() {
    let data = this.props.brands.all_brands

    if (data) {
        data.sort(this.dynamicSort("name"));
        console.log(data);
    } else {
        return 'loading...'    
    }
}