How to get object from an external file using JQuery?

Question

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:

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

If I console in my JQuery function I get mainSliderData is not defined. — Berg_Durden
– Berg_Durden, Commented Oct 28, 2020 at 21:42

imvain2 · Accepted Answer · 2020-10-28 22:00:20Z

2

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

edited Oct 28, 2020 at 22:00

answered Oct 28, 2020 at 21:54

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

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

Comments

joshmoto · Accepted Answer · 2020-10-29 01:14:43Z

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>

Berg_Durden · Accepted Answer · 2020-10-28 22:06:33Z

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.

Collectives™ on Stack Overflow

How to get object from an external file using JQuery?

3 Answers 3

Comments

UPDATE

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

UPDATE

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related