Passing JavaScript object to another function

Question

I'm using an API that allows me to access JSON objects which I've used and convert in to a JavaScript object. I get a console log of film names so this works.

Now I'm I was wondering is it possible to reference this film object in other functions? or do I need to do a request in every function to access the film properties?

$("#search-button").click(function(){
   search();
});


function search() {

  var userInput = $("#content-container-search").val().replace(/\s+/g,"%20");
  var searchTerm = "".concat(standardURL, apiKey, 'query=', userInput);
  var request = new XMLHttpRequest();

  request.open('GET', searchTerm , true);

  request.onload = function(data) {
    var data = JSON.parse(this.response);
    if(data['results']){
      data.results.forEach(film => {
        if(film['title']){
          console.log("film title : " + film.title);
        }
      });
    }  
  }

  request.send();

}

Inside the "onload" function you can pass `data` to any function you like. — Pointy, Feb 06 '19 at 15:32
`data.results` is an array, so you can just do something like `myFunction(data.results[0])` and it will pass the first film object to the function. (also, JSON is text) — , Feb 06 '19 at 15:32
@ChrisG I think `data` is an object; `data.results` is the array. — Pointy, Feb 06 '19 at 15:33
`var data` inside a method that accepts a `data` argument is a code smell — Taplar, Feb 06 '19 at 15:33
https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call or https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — epascarello, Feb 06 '19 at 15:35

score 0 · Answer 1 · answered Feb 06 '19 at 15:40

I think you need to understand the scope of each variable... if you do so, you can create a variable with greater scope, for example if you create a var data; outside the search function, and when you receive the data you do: data=JSON.parse(this.response); you will have access to data variable from outside the function

something like this:

$("#search-button").click(function(){
    search();
});

var data;

function search() {
    var userInput = $("#content-container-search").val().replace(/\s+/g,"%20");
    var searchTerm = "".concat(standardURL, apiKey, 'query=', userInput);
    var request = new XMLHttpRequest();

    request.open('GET', searchTerm , true);

    request.onload = function(data) {
        data = JSON.parse(this.response);
        data.results.forEach(film => {
        console.log(film.title);      
    });  
}

request.send();

}

score 0 · Answer 2 · answered Feb 06 '19 at 15:41

There are two ways you can do as follow:

$("#search-button").click(function(){
   search();
});

var firmList; // global variable

function search() {
var userInput = $("#content-container-search").val().replace(/\s+/g,"%20");
var searchTerm = "".concat(standardURL, apiKey, 'query=', userInput);
var request = new XMLHttpRequest();

request.open('GET', searchTerm , true);

request.onload = function(data) {
    var data = JSON.parse(this.response);
 firmList = data; // set data to global variable.
    data.results.forEach(film => {
        console.log(film.title);      
    });  
}

request.send();

}


function test(){  // test external function
 console.log(firmList); // will log the object
}


   /*******************OR *****************/

request.onload = function(data) {
    var data = JSON.parse(this.response);
 test(data);  // pass the object to another function.
    data.results.forEach(film => {
        console.log(film.title);      
    });  
}

function test(_object){ // test function.
 console.log(_object); // will log the parsed response object here.
}

Passing JavaScript object to another function

2 Answers2