0

I'm a bit tired and I can't see why I'm getting undefined errors on the variable cat.data[0].id.

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
      function Trial() {
          var index = 0;
          var cat = [];
          
          function getcat() {
                  .
                  .Makes a call to get JSON set of data in the form
                  .{"status" : "success", "data" : [{"id":"8", "url":"http:\/\/google.com", "description":"Search Engine"}]}
                  .
                  request.success(function (data) {
                    cat = $.parseJSON(data);
                    if (cat.status === "error") {
                        alert(cat.message);
                    }
                    console.log(cat.data[index].id);
                    alert(cat.data[0].id);
                  });
                  request.error(function (data, status) {
                    alert("Error connecting to API:" + status);
                  });
              }
          }
          
          function tests() {
            getcat();
            console.log(cat.data[index].id);
          }

So when we call tests function it pulls the data and puts into array and the entries for console.log and alert do exactly as they should and display the id field value. However when it returns to tests and does the console.log entry there it fails with:

"Unable to get property '0' of undefined or null reference"

It's a global variable in the master function so why isn't it able to access it?

Amir
  • 1,328
  • 2
  • 13
  • 27
Mako77
  • 85
  • 8
  • Try logging out just cat and look at the structure. – Jeremy Jackson May 26 '17 at 17:20
  • Yes I have done that and it is correct. The problem is that the function tests doesn't seem to be able to see cat...? which is weird as it can see index! – Mako77 May 26 '17 at 17:22
  • 1
    Well, you have a typo in the function name first off. `getcats();` should be `getcat();` in the `tests` function. – Chase DeAnda May 26 '17 at 17:22
  • 1
    It can access `cat` but it seems like `cat` doesn't have a `data` property on it, i.e. `cat.data` is undefined. – Arnav Aggarwal May 26 '17 at 17:22
  • It's because cat is an empty array until after you get the data back in the callback of the request. – Jeremy Jackson May 26 '17 at 17:23
  • Sorry that was typo when copy and pasting - Editied. – Mako77 May 26 '17 at 17:23
  • 1
    When you would do `console.log(cats)`, you would see it is an empty array, since none of the response code has executed yet. The `success` callback runs later than your test `console.log`. Read about asynchronous code in JavaScript and the referenced duplicate questions. – trincot May 26 '17 at 17:23
  • OK - I was wondering that as some of the tests did show the output in a odd order. So when getcats() is being executed it moves onto the console.log ? – Mako77 May 26 '17 at 17:25
  • trincot would be right - the array is empty. That was my gut instinct. Thanks – Mako77 May 26 '17 at 17:30
  • So I tried adding this: var check = getcats(); having aded some return code to the getcats() function which I believe should make it synchronise but the same issue happens? – Mako77 May 26 '17 at 17:45

0 Answers0