How to get object from an external file using JQuery?

user_11512309 0
Viewed 91

I just started learning JQuery and I am a little lost with this.

I want to retrieve an object from an external file but everything I am getting is the visual representation of the object.

I am reading the documentation and found getScript: https://api.jquery.com/jQuery.getScript/

My external file:

let mainSliderData = {
    img1: '../vendors/img/slide1/slider.gif',
    img2: '../vendors/img/slide1/slider.gif',
    img3: '../vendors/img/slide1/slider.gif',
    img4: '../vendors/img/slide1/slider.gif',
    img5: '../vendors/img/slide1/slider.gif',
    img6: '../vendors/img/slide1/slider.gif',
    img7: '../vendors/img/slide1/slider.gif',
}

script.js file:

$(document).ready(function(){
    $.getScript( "../../data/mainSliderData.js", function( data ) {
        console.log(typeof data );
        console.log( data ); 
    }) .fail(function( jqxhr, settings, exception ) {
        console.log('error:')
        console.log(exception)
    })
})

I want to get the object, but Instead when I log the answer into the console I get this:

enter image description here

How can I get the actual object coming from my external file?

dom html jquery javascript
3 Answers

Instead of using let use var in the mainSliderData file as let's scope isn't allowing you to access it.

Then you can access it like console.log(mainSliderData).

user_36842650

If it's just object data in the mainSliderData.js file, you could perhaps use a json file instead containing your object data.

Create a file called mainSliderData.json with your object data...

{
  "mainSliderData": {
    "img1": "../vendors/img/slide1/slider.gif",
    "img2": "../vendors/img/slide1/slider.gif",
    "img3": "../vendors/img/slide1/slider.gif",
    "img4": "../vendors/img/slide1/slider.gif",
    "img5": "../vendors/img/slide1/slider.gif",
    "img6": "../vendors/img/slide1/slider.gif",
    "img7": "../vendors/img/slide1/slider.gif"
  }
}

And then get the file using jQuery.getJSON()...

$.getJSON("../../data/mainSliderData.json", function(json) {
  console.log("success");
  console.log(json);
})
  .done(function() {
    console.log("done");
  })
  .fail(function() {
    console.log("error");
  });


Here is demo loading the above json from a remote json file at https://jsonbin.io/

$.getJSON and $.getScript are both shorthand functions of $.ajax, and because our remote jsonbin demo file is protected via a secret key, I am having to use $.ajax so I can setRequestHeader to authenticate json file access. But the results should be the same if you were using $.getJSON method on your json file url (which should not need send headers).

// headers function for demo only
var headers = function(xhr) {
  xhr.setRequestHeader('secret-key', '$2b$10$yK4/uNbaGMm.XC8FPGB/UOSINcEoT38KOduwKAgKY8EQrt2owmN/G');
}

// jquery ajax call
$.ajax({

  // essentially $.getJSON long hand
  url: 'https://api.jsonbin.io/b/5f9a0539f0402361dcee11e6/2',
  type: 'GET',
  dataType: 'json',

  // on success
  success: function(json) {
    console.log("success");
    console.log(json.mainSliderData);

    // example each function to handle json mainSliderData data
    $.each(json.mainSliderData, function(id, path) {

      // append slide image to body
      $('BODY').append('<img src="' + path + '" alt="' + id + '" />');

    });

  },

  // on fail
  error: function() {
    console.log("error");
  },

  // send headers for demo as remote json demo file is protected with secret key at https://jsonbin.io
  beforeSend: headers

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



UPDATE

I just discovered on https://jsonbin.io/ I can create public json files...

Your mainSliderData json... https://api.jsonbin.io/b/5f9a12cf9291173cbca51786

So here is live demo using $.getJSON method...

// json file url
let json_file_url = "https://api.jsonbin.io/b/5f9a12cf9291173cbca51786";

// jquery get json call
$.getJSON(json_file_url, function(json) {
    console.log("success");
    console.log(json);

    // example each function to handle json mainSliderData data
    $.each(json.mainSliderData, function(id, path) {

      // append slide image to body
      $('BODY').append('<img src="' + path + '" alt="' + id + '" />');

    });
  })
  .done(function() {
    console.log("done");
  })
  .fail(function() {
    console.log("error");
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

user_8888940

I solved it returning the object through a function and calling it from inside the JQuery function.

EXTERNAL FILE:

let mainSliderData

function returnData(){
    mainSliderData = {
        img1: '../vendors/img/slide1/slider.gif',
        img2: '../vendors/img/slide1/slider.gif',
        img3: '../vendors/img/slide1/slider.gif',
        img4: '../vendors/img/slide1/slider.gif',
        img5: '../vendors/img/slide1/slider.gif',
        img6: '../vendors/img/slide1/slider.gif',
        img7: '../vendors/img/slide1/slider.gif',
    }

    return mainSliderData
}

script.js file:

$(document).ready(function(){
    $.getScript( "../../data/mainSliderData.js", function( data ) {
        console.log(returnData())
    }) .fail(function( jqxhr, settings, exception ) {
        console.log('error:')
        console.log(exception)
    })
})

@imvain2 answer also works fine.

user_115123090
Related