Ajax call to my API returns undefined

Question

I created a very simple rest API and following the sample on this other post : HERE I made an ajax call to my API but for some reason I get undefined as a response. I think I'm doing something wrong in the call.

Here is the call:

$( document ).ready(function() {
    FetchData();
});
function FetchData() {
    $.ajax({
        async: false,
        type: "GET",
        url: "http://austinwjones.com/radio/gunsmoke/read.php",
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
            $.each(data, function(i, object) {
                console.log(data.records.epi);
            });
        },
        error: function() {

        }
    });
}

By directly going to my API Here you can see there is a result. I suspect my issue is with this part?

 success: function(data, textStatus, jqXHR) {
            $.each(data, function(i, object) {
                console.log(data.records.epi);
            });

Any help is appreciated.

`$.each(data, function(i, obj) { console.log(obj.records.epi); });` — Jai, Aug 09 '18 at 08:09
To expand on the above two comments; `records` in the response is an array, so you need to access it by index, or loop through it — Rory McCrossan, Aug 09 '18 at 08:10
@Alex wow I feel like an idiot, thanks for the quick response feel free to post it as an answer and I'll accept it. — Austin Jones, Aug 09 '18 at 08:10
@AustinJones you're probably best to just delete this question as it was a simple syntax mistake that's unlikely to help any future visitors — Rory McCrossan, Aug 09 '18 at 08:11
@AustinJones happens to the best. go ahead and delete the question, it will be our little secret — Alex, Aug 09 '18 at 08:13

score 1 · Answer 1 · answered Aug 09 '18 at 08:32

Just another solution, with baked Promise, simple jQuery/JSON solution.

function getJSON() {
  return new Promise((resolve, reject) => {
    jQuery
    .getJSON('http://austinwjones.com/radio/gunsmoke/read.php')
    .then((data) => {
      jQuery.each(data.records, (i, record) => {
        console.log(record);
        return resolve(record);
      })
    });
  });
}

getJSON()
.then((records) => {
  console.log(records);
})

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

This way, you can get everything and display it, once it's been fetched.

Fancy, I've never used promises, I'll have to look more into it. — Austin Jones, Aug 09 '18 at 08:48

score 0 · Accepted Answer · answered Aug 09 '18 at 08:11

0

you should rather change it to:

for (var i = 0; i < data.records.length; i++) {
  console.log( data.records[i].epi );
}

since records is an array.

answered Aug 09 '18 at 08:11

Alex

9,911
5
33
52

Ajax call to my API returns undefined

2 Answers2