0

I'm pulling data from an XML feed. That is all working correctly but I need productIDs available outside the function.

    // Get feed data
    $.get('example-feed.xml', function (data) {

    var $xml = $(data);

    // Collect array of product IDs
    var productIDs = [];

    // extract ids from xml
    $xml.find("item").each(function() {

      var $this = $(this)

      item = {
        id: $this.find("id").text()
      }

      // get the id
      var itemID = item.id;

      // push ids to array
      productIDs.push(itemID);

    });

    console.log(productIDs); // Works as expected

  });

  console.log(productIDs); // Undefined, also as expected

How can I adjust my function to work like that?

    example = function(){

      var productIDs = "my content ids"

      return {'productIDs': productIDs}

    }

    var retrive = example();

    console.log(retrive.productIDs);
Chris Martin
  • 30,334
  • 10
  • 78
  • 137
Mischa Colley
  • 123
  • 3
  • 13
  • If the function is asynchronous (AJAX), you can't return a value, you have to use callbacks or promises. Your second example works fine – Ruan Mendes Mar 16 '16 at 01:47
  • try `var productIDs = $.get(.....)` with what you want to return at the bottom of your function like `return productIDs` and then console.log(productIDs) right after. Does that work? – Tim Roberts Mar 16 '16 at 01:48
  • @Juan isn't the `function(data)` being passed to `get` the callback? Or am I missing something? – Tim Roberts Mar 16 '16 at 01:49
  • *"but I need productIDs available outside the function."* Put the code that needs to access `productIDs` into a function and pass `productIDs` to that function. See [How do I return the response from an asynchronous call?](http://stackoverflow.com/q/14220321/218196). *"How can I adjust my function to work like that?"* You can't `$.get` is asynchronous. You cannot return the response. – Felix Kling Mar 16 '16 at 01:51

1 Answers1

0

There are multiple ways you can do this, but the best thing here is to use promises, because JQuery's get is usually asynchronous function and you have to wait for it's completion to get product ids

You may do it like this

function fetchThings () {
  return new Promise(function (yes, no) {
    $.get('example-feed.xml', function (data) {

      // some code here

      console.log(productIDs); // Works as expected
      yes(productIDs);
    });
  });
}

fetchThings().then(function (productIDs) {
   // do stuff with prodcut ids here
});

The other way to do it would be making your $.get call synchronous, so replace it by

var productIDs;
$.ajax({url: 'example-feed.xml', type: "GET", async: false, success: function (data) { 
// process productIDs here
}});

// use productIDs here

Update:

Here is a snippet of async ajax, click run to check

var postIDs;

$.ajax({
  url: 'http://jsonplaceholder.typicode.com/posts',
  method: 'GET',
  async: false,
  success: function(posts) {
    postIDs = posts.map(function (p) { return p.id; });
  }
});

document.write(JSON.stringify(postIDs));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Ammar Hasan
  • 2,436
  • 16
  • 22