Cannot read property 'Drivers' of undefined

Question

Its my first time posting here but i'm desperate for a solution. I'm sorry in advance if my question format is not proper. So basically what i'm struggling with is appending json data to paragraphs in my html. My API is okay, i checked with console.log the data is there, but every time i try to append the data, an error pops up in my console stating: Uncaught TypeError: Cannot read property 'Drivers' of undefined.

I've tried removing MRData from function but that didn't seem to do anything.

     $.getJSON("http://ergast.com/api/f1/2016/drivers.json", function(MRData) {
        console.log(MRData);
        var drId = MRData.DriverTable.Drivers[0].driverId;
        var permanentNum = MRData.DriverTable.Drivers[0].permanentNumber;
        var kod = MRData.DriverTable.Drivers[0].code;
        $('#p0').append(drId);
        $('#p1').append(permanentNum);
        $('#p2').append(kod);
   })
    <body>
          <p id="p0"></p>
          <p id="p1"></p>
          <p id="p2"></p>
    </body>

What I'm hoping to accomplish here is to get the strings from each of the variables and to append them to my paragraphs.

Possible duplicate of [JavaScript "cannot read property "bar" of undefined](https://stackoverflow.com/questions/8004617/javascript-cannot-read-property-bar-of-undefined) — Liam, Jan 14 '19 at 16:42
`MRData.MRData.DriverTable.Drivers[0].driverId` etc. Your parsed JSON is an object with a key called `MRData`. Call your callback argument `data` and then do `data.MRData.DriverTable.Drivers[0].driverId` and it makes it easier to understand. — Andy, Jan 14 '19 at 16:42
Yup that solved it, i renamed my callback argument into data and everything is okay now. Thanks! — Филип Таневски, Jan 14 '19 at 16:48

score 1 · Accepted Answer · answered Jan 14 '19 at 16:47

the problem is that you think that the result data is MRData but instead it is an object which holds MRData.

data = {
    MRData: {...}
}

accessing to MRData will make your code to work.

$.getJSON("http://ergast.com/api/f1/2016/drivers.json", function(data) {
  //data is an object which will have MRData inside.
  var MRData = data.MRData;
  var drId = MRData.DriverTable.Drivers[0].driverId;
  var permanentNum = MRData.DriverTable.Drivers[0].permanentNumber;
  var kod = MRData.DriverTable.Drivers[0].code;
  $('#p0').append(drId);
  $('#p1').append(permanentNum);
  $('#p2').append(kod);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p id="p0"></p>
  <p id="p1"></p>
  <p id="p2"></p>
</body>

score 0 · Answer 2 · answered Jan 14 '19 at 16:55

you must use

var MRData =data.MRData;
        console.log(data.MRData);
        var drId = MRData.DriverTable.Drivers[0].driverId;
        var permanentNum = MRData.DriverTable.Drivers[0].permanentNumber;
        var kod = MRData.DriverTable.Drivers[0].code;
        $('#p0').append(drId);
        $('#p1').append(permanentNum);
        $('#p2').append(kod);
   })

your reciver data has field MRData and you use var MRData =data.MRData;

score 0 · Answer 3 · answered Jan 14 '19 at 17:04

Inside the json file you have a variable mrData so your start should be

MRData.MRData.DriverTable.Drivers

if you have a look at your json file it says

{ 
  MRData={}
}

adding MRData= MRData.MRData; should fix the problem. or you could simple modify the jsonfile content to {DriverTable:{// bla bla bla }}

    $.getJSON("http://ergast.com/api/f1/2016/drivers.json", function(MRData) {
        console.log(MRData);
        MRData= MRData.MRData; // here is a simple workout
      
        var drId = MRData.DriverTable.Drivers[0].driverId;
        var permanentNum = MRData.DriverTable.Drivers[0].permanentNumber;
        var kod = MRData.DriverTable.Drivers[0].code;
        $('#p0').append(drId);
        $('#p1').append(permanentNum);
        $('#p2').append(kod);
        
   })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
          <p id="p0"></p>
          <p id="p1"></p>
          <p id="p2"></p>
    </body>

Cannot read property 'Drivers' of undefined

3 Answers3