JQuery prints undefined instead of data from JSON array

Question

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?

Can you post exactly how are you getting in success call back? — Mox Shah
– Mox Shah, Commented Mar 23, 2015 at 13:46
1st thing, $.each(data, function(i, item) { here data is not an array or your JSON data, item.projectCode will always be undefined. — Mox Shah
– Mox Shah, Commented Mar 23, 2015 at 13:49
@MokshShah I ended up changing my code by following a youtube tutorial (youtube.com/watch?v=pLCxRtHW4x8) and this works for my purposes. Thank you for all your help, regardless — Rachael
– Rachael, Commented Mar 26, 2015 at 23:59

Mox Shah · Accepted Answer · 2015-03-23 13:53:32Z

1

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>

answered Mar 23, 2015 at 13:53

Mox Shah

3,0153 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rachael Over a year ago

Tried this, but it no longer prints anything out

Mox Shah Over a year ago

In that case, you need to post your JSON result

Piotr Dajlido · Accepted Answer · 2015-03-23 14:09:22Z

0

Weak points of your solution:

$.each(data, function(i, item) { if it's not an array it will be undefined.

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.

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.

edited Mar 23, 2015 at 14:09

answered Mar 23, 2015 at 13:56

Piotr Dajlido

2,04017 silver badges28 bronze badges

Collectives™ on Stack Overflow

JQuery prints undefined instead of data from JSON array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related