JavaScript returns undefined

Question

I have the following JSON that I receive from a URL, we call the URL here www.blabla.com/testjson

And it returns:

[{"Identifier":1,"Naam":"NOT Given","Adres":"Kopenhagen 9","Postcode":"0000LL","Plaats":"NOT Given","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":2,"Naam":"NOT Given","Adres":"NOT Given 1","Postcode":"0000LL","Plaats":"Rotterdam","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":3,"Naam":"NOT Given","Adres":"NOT Given 6","Postcode":"0000LL","Plaats":"Rotterdam","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":4,"Naam":"NOT Given","Adres":"NOT Given 1","Postcode":"0000LL","Plaats":"Den Haag","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":5,"Naam":"NOT Given","Adres":"NOT Given 218","Postcode":"0000LL","Plaats":"Zoetermeer","Longitude":"0.00000","Latitude":"0.00000"}
];

I want to retrieve this JSON en return this result, but I get UNDEFINED, this is my code:

$.each("www.blabla.com/testjson", function(index, element) {
    $('.result').append(element.Naam);
    alert(element.Naam);
});

You also need to check if the user cookies are true or else it won't return something, I don't do this because I work with phonegap and jquery mobile. Can that be the problem?

In this case, I assume, `$.each` will iterate over the each character of the string. And strings don't have a property `Naam` (that's why you get `undefined`). It won't execute an AJAX request. Please have a look again at the documentation: http://api.jquery.com/category/ajax/, http://api.jquery.com/jQuery.each/. — Felix Kling, Sep 27 '12 at 08:32
can you provide the url you are trying to use to get the json file? — Luca Borrione, Sep 27 '12 at 14:09

Littm · Accepted Answer · 2012-09-27T09:41:29.960

3

Try using the method $.getJSON:

$.getJSON('http://www.blabla.com/testjson.json', function(data) {
    $.each(data, function(key, val) {
        $('.result').append(val.Naam);
        alert(val.Naam);
    });
});

For more information, check the online doc: http://api.jquery.com/jQuery.getJSON/

PS: Make sure that you added the website www.blabla.com to your whitelist exception.

For more information about Phonegap whitelist exceptions, check the online doc (the following link is for Phonegap / Cordova version 2.1.0): http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

edited Sep 27 '12 at 09:41

answered Sep 27 '12 at 08:36

Littm

4,923
4
30
38

Done that, now i get nothing back, is it because i need to set up the cookies?? – bdz Sep 27 '12 at 08:53
Did you add the website www.blabla.com to your whitelist exception? – Littm Sep 27 '12 at 08:59
@bdz: It has nothing to do with cookies. If the URL is external, you might have problems with the **same-origin policy**: http://en.wikipedia.org/wiki/Same_origin_policy. – Felix Kling Sep 27 '12 at 08:59
@Littm: I don't think "whitelist exception" is really helpful here, because it does not refer to a particular solution for SOP. What exactly are you talking about? CORS? – Felix Kling Sep 27 '12 at 09:01
@FelixKling: You need to add whitelist exception with Phonegap, otherwise you won't have access to the external link. Check this link: http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide – Littm Sep 27 '12 at 09:39
@Littm added whitelist exception still dont getting any results – bdz Sep 27 '12 at 10:12
Oh I'm sorry, I forgot that it was tagged with phonegap (and I honestly have no experience with it). Please accept my apologies. – Felix Kling Sep 27 '12 at 15:31

score 1 · Answer 2 · edited May 23 '17 at 11:56

Your code will loop over each character of the param string "www.blabla.com/testjson", returning 'undefined' because by writing element.Naam you're trying to access a non existent property named 'Naam' of a character string.

You need to load the external json content by using an ajax call and parse it.

Here is a longer alternative to Littm's answer if you're interested in handling errors too:

    $(document).ready(function()
    {
        $.ajax(
        {
            type: "GET",
            url: "data.json",
            data: "nocache=" + Math.random(),

            // dataType: "json",
            // the above requires 'application/json' as Content-Type headers
            // see 'reference A' in the footer notes
            // if you active this, please modify following code accordingly

            success: function (source, textStatus, jqXHR)
            {
                var data = jQuery.parseJSON(source);
                $.each(data, function(index, value)
                {
                    alert(index+" "+value.Naam);
                });
            },

            error: function(data)
            {
                // alert("ERROR");
            }
        });
    });

Notes:
1. Reference A

EDIT: To get more info from error, add the following:

$(document).ajaxError(
    function (event, jqXHR, ajaxSettings, thrownError)
    {
        console.log(event);
        console.log(jqXHR);
        console.log(ajaxSettings);
        console.log(thrownError);
    });

Then use the chrome console.

EDIT:
If I type the url you provided in a browser, I am redirected to a login page.
I think that your ajax code is getting this HTML document, too.

Try to check your session: you can add a div in your code and load the content of your url using curl inside this new div. Until you don't see your json code inside this div, your session variables are not working properly.
If curl will get correctly your file content, so will do ajax.

EDIT:
See? Your problem is to correctly login into the webservice from which you are trying to get the json file.

Your friend is right.
You have to set correctly your $_SESSION in PHP which basically use cookies to retain session info.

Try to correctly:

session_start() ;

at the beginning of your php code, before using ajax.
References:
- php.net session_start
- PHP session not working with JQuery Ajax?

Please note that this will work only within the same domain:
Why jquery ajax not sending session cookie

If you are using different subdomains you can try to use

setcookie

References: - php.net setcookie
- Cross domain cookie access (or session)

As far as I know there's no way to set cookies within different domains.
If you are in this situation, I suggest you to have a look at SimpleSAMLPHP descbribed here: cross domain cookies

Good luck :)

f.Event currentTarget: HTMLDocument data: undefined delegateTarget: HTMLDocument exclusive: undefined handleObj: Object isTrigger: true jQuery17109108295564074069: true namespace: "" namespace_re: null result: undefined target: HTMLDocument timeStamp: 1348756349438 type: "ajaxError" __proto__: Object — bdz, Sep 27 '12 at 14:32
I am getting the data from a webservice, the guy who build the webservice told me to use cookies.. curl is by using PHP, I cannot use PHP with phonegap :( — bdz, Sep 28 '12 at 06:01
@bdz: see my last edit. Please note that your question has been closed due to the fact that your problem is too localized. Ask your webservice further assistance if you cannot find a way out. — Luca Borrione, Sep 28 '12 at 07:49

JavaScript returns undefined

2 Answers2