Getting "Cannot read property of undefined" in jQuery AJAX

Question

I'm having trouble on getting data from a local JSON file.

I have this peace of code

$.ajax({
    method: 'GET',
    url: './src/assets/api.json',
    success: (function(data) {
      $.each(data, function(index, val) {
        // Code
        console.log('Selling currency: ' + val.eur.pro);
      })
    }),
    error: function() {
      console.log('Something went wrong.');
    }
  })

That throws an error in console:

Cannot read property 'pro' of undefined

My JSON file looks like this

{
  "result": {
    "date": "23.08.2017",
    "eur": {
      "kup": "119.0352",
      "sre": "119.3934",
      "pro": "119.7516"
    },
    "usd": {
      "kup": "101.2032",
      "sre": "101.5077",
      "pro": "101.8122"
    },
    // other objects ...
  }
}

I don't know why is it throwing that error. If I were to remove the pro from the val.eur.pro and leave it like this val.eur it returns the object just fine. I don't know how am I suppose to access the 3rd value.

Looping over a single object seems strange to me. What happens when you do `console.log(val.eur)`? — David, Aug 25 '17 at 10:41
First comment, that didn't work. Second comment, didn't try that. Third comment, the console shows me the whole `json` file with every object in an array, 3 times. — Vladimir Jovanović, Aug 25 '17 at 10:41
The code you've shown works fine: https://jsfiddle.net/qqfcdyns/. This either means there's a discrepancy between your production code and what you've pasted above, or the response JSON is in a different format. Without any more information, we can't help you. — Rory McCrossan, Aug 25 '17 at 10:45
@David , I need to use the rest of the objects too, I'm just testing the first one to see if everything is ok. `console.log(val.eur)` returns `19 undefiend`. — Vladimir Jovanović, Aug 25 '17 at 10:49
@VladimirJovanović: The rest of *what* objects? Your JSON has only one single overall object, with properties therein. And how can a single `console.log` print two values? I think you're overlooking something. — David, Aug 25 '17 at 10:50
@Rory McCrossan but you've added the variable `data = {}` in `json` file. I am not allowed to modify the `json` file. It's ok, I appreciate help from all of you, but one answer bellow is close to the solution. Thank you anyways. — Vladimir Jovanović, Aug 25 '17 at 11:10
I managed to get it working by logging the `data.result.eur.pro` in the console. Thank you @Rory McCrossan for the tip. If you can post an answer to my question so I can get it verified. The code that gives the desired result is `$.each(data, function(index, val) { console.log(data.result.eur.pro); });` , so If you can post an answer with that code, I will accept as verified. Thanks again. — Vladimir Jovanović, Aug 25 '17 at 12:32

score 1 · Accepted Answer · answered Aug 25 '17 at 10:53

This might help you https://jsfiddle.net/rprxrhLp/

var data = {
  "result": {
    "date": "23.08.2017",
    "eur": {
      "kup": "119.0352",
      "sre": "119.3934",
      "pro": "119.7516"
    },
    "usd": {
      "kup": "101.2032",
      "sre": "101.5077",
      "pro": "101.8122"
    }
  }
};

var keys = Object.keys(data.result);
for(var key in keys){
  if( typeof data.result[keys[key]] === 'object'){
   $.each(data.result[keys[key]], function(i, v){
     console.log(keys[key] + ", " + i+ ": " + v)
    })
   
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I worked with local data variable. Get the keys from result & then iterate over it.

For getting the pro value, just do this

var keys = Object.keys(data.result);
for(var key in keys){
   if( typeof data.result[keys[key]] === 'object'){
      console.log("Pro value:", data.result[keys[key]].pro);
   }
}

Hope this will help you.

Getting "Cannot read property of undefined" in jQuery AJAX

1 Answers1