Load Data from JSONBin.io via using jQuery $.ajax

Question

Trying to display data from api api secret key:$2b$10$NQY9ge9Lc7fr9E98t6wcGuBiQ1ckBgbxN0fpbL2qIF9/zzOH30NXm

The api key link: https://api.jsonbin.io/b/5f54c4ac4d8ce4111389dc46/1

The jquery Code:

$.ajax(
  {
    url: 'https://api.jsonbin.io/b/5f54c4ac4d8ce4111389dc46/1',
    type:'GET',
    dataType: 'json',
    data:{
      "key":btoa("pd_adeptcom_bnd:xk8MU9TR")
    },
    beforeSend: function(xhr) {
        $("#imagelodaing").show();
        xhr.setRequestHeader("Authorization", "Basic " + btoa("c65eRs3znBAQIILs0cUvkrbRRl87LvBW"));
      },
    success: function(json)
    {
      $("#imagelodaing").hide();
      // get the `airport` array 
      var device = json.siteList;
      var j = 1;

      // loop through the array to populate your list
      $.each(device, function(i, sites)
      {
        // console.log(sites.siteName)
        // $('#data_table').append("" + "" + sites.siteName + "" + "");
        $.each(sites.deviceList, function(i, values)
        {
          var time = (values.count * 25) / 60;

          // append values to table
          $('#data_table').append("" + "" + "" + sites.siteName + "" + "" + values.deviceName + "" + "" + values.count + "" + "" + parseFloat(time).toFixed(2) + " Min" + "" + "" + "");

          if (values.status == "READY")
          {
            $('#checked_box' + j + '').attr('disabled', true);
            $('#checked_box' + j + '').closest("tr").addClass('table-active');
          }
          else if (values.status == "IN PROGRESS")
          {
            $('#checked_box' + j + '').attr('disabled', true);
            $('#checked_box' + j + '').closest("tr").addClass('table-active');
          }
          j++;
        });
      });
    },
    error:function(){
      console.log('failed');
      $("#imagelodaing").hide();
    }
  });

But it is showing me this error:

message: "Need to provide a secret-key to READ private bins", success: false} message: "Need to provide a secret-key to READ private bins" success: false

Help Me Out Fixing it please,Anyhelp would be Highly appreciated

The json Data ss is attached below

user_13669048 · Answer

First of all you need a secret_key from the JSONbin which you have added to the question now as i have shown you how to get that key.

Secondly, to get the data you need to pass it in a setRequestHeader with your secret-key. Also you do not need to send any kind data with your $.ajax since its a get request and we are passing the secret key which is only needed.

I have simplified your code by using a forEach function to the data we need to display in our table

Live Working Demo:

$.ajax({
  url: 'https://api.jsonbin.io/b/5f54c4ac4d8ce4111389dc46/1',
  type: 'GET',
  dataType: 'json',
  beforeSend: function(xhr) {
    $("#imagelodaing").show();
    xhr.setRequestHeader("secret-key", "$2b$10$NQY9ge9Lc7fr9E98t6wcGuBiQ1ckBgbxN0fpbL2qIF9/zzOH30NXm");
  },
  success: function(json) {
    var j = 1;
    json.siteList.forEach(function(data) {
      data.deviceList.forEach(function(values) {
        var time = (values.count * 25) / 60;
        $('#data_table').append("" + "" + "" + data.siteName + "" + "" + values.deviceName + "" + "" + values.count + "" + "" + parseFloat(time).toFixed(2) + " Min" + "" + "" + "");
        if (values.status == "READY") {
          $('#checked_box' + j + '').attr('disabled', true);
          $('#checked_box' + j + '').closest("tr").addClass('table-active');
        } else if (values.status == "IN PROGRESS") {
          $('#checked_box' + j + '').attr('disabled', true);
          $('#checked_box' + j + '').closest("tr").addClass('table-active');
        }
        j++
      })
    })
  },
  error: function() {
    $("#imagelodaing").hide();
  }
});

Load Data from JSONBin.io via using jQuery $.ajax

1 Answers