Sorting Fetched API Data using XHR using Javascript

Question

I have a working connection between FDA's Drug API and XMLHttpRequest();. How can I sort ascending the fetched data with its GENERIC NAME (results["open_fda"].generic_name).

I can't import all the arrays from that API, even if I limited it to a hundred entries, I think that would be counter-productive.

Any ideas?

Thank you in advance!

    <script>

    var header = document.querySelector('header');
    var section = document.querySelector('section');

    var requestURL = 'https://api.fda.gov/drug/label.json?limit=100';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();

     request.onload = function() {
     var drugs = request.response;
     populateHeader();
     showDrugs(drugs);
    }

    function populateHeader() {
      var myH1 = document.createElement('h1');
      myH1.textContent = "Maria Health Prescription Drugs";
      header.appendChild(myH1);

      var myPara = document.createElement('p');
      header.appendChild(myPara);
    }

    function showDrugs(jsonObj) {
      var drug = jsonObj['results'];

      for(i = 0; i < drug.length; i++) {
        var myArticle = document.createElement('article');
        var myH2 = document.createElement('h2');
        var myPara1 = document.createElement('name');
        var myPara2 = document.createElement('p');
        var myPara3 = document.createElement('p');
        var myPara4 = document.createElement('p');
        var myPara5 = document.createElement('warning');
        var myPara6 = document.createElement('p');
        var myPara7 = document.createElement('p');
        var myPara8 = document.createElement('p');
        var myList = document.createElement('ul');

        myH2.textContent = 'Generic Name: ' + drug[i]["openfda"].generic_name;
        myPara2.textContent = 'Product Type: ' + drug[i]["openfda"].product_type;
        myPara3.textContent = 'Purpose: ' + drug[i].purpose;
        myPara4.textContent = 'Indication and Usage: ' + drug[i].indications_and_usage;
        myPara5.textContent =  drug[i].warnings;
        myPara6.textContent = 'Active Ingredients: ' + drug[i].active_ingredient;
        myPara7.textContent = 'Inactive Ingredients: ' + drug[i].inactive_ingredient;
        myPara8.textContent = 'Storage and Handling: ' + drug[i].storage_and_handling;

        myArticle.appendChild(myH2);
        myArticle.appendChild(myPara1);
        myArticle.appendChild(myPara2);
        myArticle.appendChild(myPara3);
        myArticle.appendChild(myPara4);
        myArticle.appendChild(myPara5);
        myArticle.appendChild(myPara6);
        myArticle.appendChild(myPara7);
        myArticle.appendChild(myPara8);
        myArticle.appendChild(myList);
        section.appendChild(myArticle);
      }
    }

    </script>
  </body>
</html>

[There's no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/); `drug` is an array so just use [`Array.prototype.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to sort it before the loop. — Andreas, Apr 11 '17 at 16:22
How do I sort it by 'generic_name'? I tried doing `drug["openfda"].generic_name.sort()`. It does not work. I tried looking at the console, it says: `Cannot read property 'generic_name' of undefined` @Andreas — Nikolai Jaro, Apr 12 '17 at 01:05
`drug.sort()` is working but I don't know what it uses to do the sorting. I need to sort it by 'generic_name' @Andreas — Nikolai Jaro, Apr 12 '17 at 01:08

score 0 · Answer 1 · edited May 23 '17 at 12:32

I tried the following code:

function showDrugs(jsonObj) {
      var drug = jsonObj['results'];
      drug.sort(function(a, b){
          return a['openfda'].generic_name - b['openfda'].generic_name;
      });
      console.log(drug);

I also tried and got the same results:

function showDrugs(jsonObj) {
  var drug = jsonObj['results'];
  drug.sort(function(a, b){
      return a.openfda.generic_name - b.openfda.generic_name;
  });
  console.log(drug);

It works but it does not sort it by generic_name. Rather, it just changes the data but I don't know what it uses to sort things out.

I found this Sorting a JSON object in Javascript but I'm having problems on how to use it.

EDIT:

Solved it! By using this answer https://stackoverflow.com/a/4222747/7851904.

 //Sort JSON function
drug.sort(function(a,b){
//return a.openfda.generic_name - b.openfda.generic_name;
if(a.openfda.generic_name == b.openfda.generic_name)
    return 0;
if(a.openfda.generic_name < b.openfda.generic_name)
    return -1;
if(a.openfda.generic_name > b.openfda.generic_name)
    return 1;
});

Sorting Fetched API Data using XHR using Javascript

1 Answers1