Sorting API response in JSON format before passing to props in React

Question

I am trying to figure out how to sort the API response alphabetically by store name before storing the results in the component's state apiResults: []

Here is my code that is called when a form is submitted or button is clicked

getStores() {
        let userZip = this.state.userInput;
        const api = "some api";
        return fetch(api + userZip)
          .then((response) => response.json())
          .then((responseJson) => {
            //sort array alphabetically by store name
            //Add code below this line
            responseJson = sort()???
            // Add code above this line
            this.setState({
                apiResults: responseJson
            });
            console.log(this.state.apiResults);
          })
          .catch((error) => {
            console.error(error);
          });  
      }

Here is the sample JSON that I am using.

{
    "id": "1",
    "code": "35203",
    "launch_date": "2016-01-29T00:00:00.000-05:00",
    "metro_name": "Birmingham",
    "stores": [
        {
            "id": "1",
            "name": "Target",
            "launch_date": "2018-01-24T00:00:00.000-05:00"
        },
        {
            "id": "2",
            "name": "Costco",
            "launch_date": "2017-08-14T00:00:00.000-05:00"
        },
        {
            "id": "3",
            "name": "Winn Dixie",
            "launch_date": "2018-11-29T00:00:00.000-05:00"
        },
        {
            "id": "4",
            "name": "Piggly Wiggly",
            "launch_date": "2018-04-10T00:00:00.000-05:00"
        }
    ]
}

Ulrich Dohou · Accepted Answer · 2018-06-16 17:46:25Z

2

Here is an example how you can do this

responseJson.stores.sort(function(a, b) {
    return (a.name.toUpperCase() < b.name.toUpperCase()) ? -1 : (a.name.toUpperCase() > b.name.toUpperCase()) ? 1 : 0;
});

Take a look at my codepen https://codepen.io/ulrichdohou/pen/ERbYRX?editors=0010

edited Jun 16, 2018 at 17:46

answered Jun 16, 2018 at 17:28

Ulrich Dohou

1,55914 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Bailey Over a year ago

Awesome! Thank you so much that worked like a charm!

Ulrich Dohou Over a year ago

Happy coding bro

Daniel Bailey Over a year ago

responseJson.stores.sort(function (a, b) {                         return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0;                     });

Ulrich Dohou Over a year ago

Yeah thats the same thing in fact. But yours should run faster than mine because you have omited some steps. I will update to make it shorter

Daniel Bailey Over a year ago

No problem. I knew it should have been something simple but I have been trying to figure that one out for awhile now. haha. Thanks for the support man.

|

nishant · Accepted Answer · 2018-06-16 17:24:48Z

0

create an empty jsonarray object traverse through responsejson.stores and do the sorting and get the sorted output in empty array later on remove the store data and push the sorted array in responsejson.stores

answered Jun 16, 2018 at 17:24

nishant

2,6161 gold badge16 silver badges20 bronze badges

Comments

SarkarG · Accepted Answer · 2018-06-17 08:49:20Z

0

You can use loadash for this.

const sortedResponse = _.orderBy(responseJson, r => r.stores.name, ['asc'])

answered Jun 17, 2018 at 8:49

SarkarG

6872 gold badges8 silver badges30 bronze badges

Collectives™ on Stack Overflow

Sorting API response in JSON format before passing to props in React

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related