使用Javascript使用XHR对获取的API数据进行排序

时间:2017-04-11 16:14:07

标签: javascript html json

我在FDA的Drug API和XMLHttpRequest()之间有一个有效的联系。如何使用GENERIC NAME(结果[“open_fda”]。generic_name)对提取的数据进行升序排序。

我无法从该API导入所有数组,即使我将其限制为一百个条目,我认为这会适得其反。

有什么想法吗?

提前谢谢!

    <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>

1 个答案:

答案 0 :(得分:0)

我尝试了以下代码:

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

我也试过并得到了相同的结果:

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

它可以工作,但不会按generic_name对其进行排序。相反,它只是改变数据,但我不知道它用什么来解决问题。

我发现了这个Sorting a JSON object in Javascript,但我遇到了如何使用它的问题。

编辑:

解决了!使用此答案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;
});