CODEWITHSUNDEEP
jqueryajaxjson
Rachael
Rachael

Reputation: 5

JQuery prints undefined instead of data from JSON array

I'm developing a PhoneGap application with JQuery and am using AJAX to send and receive JSON data from a PHP file. For one part of my app, I would like a user to click a button and for it to display a list of vacancies. The JSON returned looks like this:

{"Vacancy":{"vacancyID":"1","projectCode":"ABCD01","title":"a title","supervisor":"Some name","description":"A description of the project vacancy","course":"Computer Science"}},
{"Vacancy":{"vacancyID":"6","projectCode":"ABCD02","title":"some title","supervisor":"some supervisor","description":"description of sorts","course":"Computer Science"}}

I'm able to get the above showing in an alert, but when I attempt to print it, it instead outputs:

action undefined -
undefined
undefined
undefined

Here is the script I have used to attempt to print it out in my html file:

<script>
    $(document).ready(function() {
        //load JSON data
        var output = $('#vacancies');
        $("#btnVacancy").click(function() {
            var data = {"action": "test" };

            $.ajax({
                //where php file is
                url: "http://localhost/helloworld/api.php",
                    //using GET in php file
                    type: "GET",
                    dataType: "json",
                    data: { type:"getV", pCourse:"Computer Science" },
                    ContentType: "application/json",
                    success: function(response) {
                        $.each(data, function(i, item) {
                            //data has been loaded
                            alert(JSON.stringify(response));
                            var vacancy = '<br>'
                            //project code
                            + '<h4>' + i + " " + item.projectCode + ' - ' + '</h4>'
                            // project title
                            + '<p>' + item.title + '<br>'
                            // project supervisor
                            + item.supervisor + '<br>'
                            //project description
                            + item.description + '</p>';

                        output.append(vacancy);
                    });
                },
                error: function(err) {
                    alert("Error: " + JSON.stringify(err));
                }
            })
        });
    });
</script>

My question is why is the information correct in the alert, but undefined once printed out?

Upvotes: 0

Views: 855

Answers (2)

Piotr Dajlido
Piotr Dajlido

Reputation: 2030

Weak points of your solution:

  1. $.each(data, function(i, item) { if it's not an array it will be undefined.
  2. dataType: "json" in GET doesn't mean that your .php is returning back data with the same header. In this case JSON.parse() will be necessary.
  3. You are alerting alert(JSON.stringify(response)); but you are appending output.append() the iterated element, from the Test Driven Development point of view this is a bad practice. Test same format of data that you are trying to work with.

Upvotes: 0

Mox Shah
Mox Shah

Reputation: 3015

1st thing, $.each(data, function(i, item) { here data is not an array or your JSON data, item.projectCode will always be undefined.

If your JSON is something like this, then bellow code should work in your case:

[{"Vacancy":{"vacancyID":"1","projectCode":"ABCD01","title":"a title","supervisor":"Some name","description":"A description of the project vacancy","course":"Computer Science"}},
{"Vacancy":{"vacancyID":"6","projectCode":"ABCD02","title":"some title","supervisor":"some supervisor","description":"description of sorts","course":"Computer Science"}}]


var responseData = [{"Vacancy":{"vacancyID":"1","projectCode":"ABCD01","title":"a title","supervisor":"Some name","description":"A description of the project vacancy","course":"Computer Science"}},{"Vacancy":{"vacancyID":"6","projectCode":"ABCD02","title":"some title","supervisor":"some supervisor","description":"description of sorts","course":"Computer Science"}}]

$.each(responseData,function(i,item){
  alert(item.Vacancy.projectCode);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions