Dynamically retrieving information from JSON using javascript

Question

I'm trying to grab a series of strings from a JSON object and concatenate them into one big string. It seemed pretty obvious for me to just use a loop, adding each new string in every iteration of said loop. When I actually plugged it in, however, I get some odd errors.

TypeError: data.posts[i] is undefined

I would normally just assume that it can't be called like that (I'm new to javascript so I'm basing much of this upon educated guesses), but here's the weird thing: the logs I printed to firebug contain exactly the expected information. I could live with the unexplained error, but then it won't display the combined string on the web page.

var data = JSON.parse(d);
var i = 0;
while(i <= data["posts"].length) {
    messages += "<b>" + data["posts"][i]['nickname']
             + ":</b> - " + data["posts"][i]['content'] + "<br>";
    i++;
    console.log(messages);
}
console.log(messages);
$('.post1').html(messages);

What exactly am I missing here?

something is very strange with your question, the error message does not seem to match the code you posted... what line exactly did that error occur? — Hogan
– Hogan, Commented Feb 2, 2013 at 20:15
The error occurs on the first line inside the while loop. The JSON is an array containing 'error' and 'posts'. Posts is populated by rows from a database query: $data['posts'] = $this->communication_model->fetch_posts($username, $offset ); — Slippery John
– Slippery John, Commented Feb 2, 2013 at 20:18
@user1375883 then see my answer, you probably have an array of size 0 — Hogan
– Hogan, Commented Feb 2, 2013 at 20:18
@user1375883 please add this info to the question not the comments :D — Hogan
– Hogan, Commented Feb 2, 2013 at 20:21

Hogan · Accepted Answer · 2013-02-02 20:17:33Z

2

Hard to tell with your question if this is the only problem, but it looks like you have an off by one issue. If the array is indexed 0 - n then length returns n+1 and your loop should be

while(i < data["posts"].length) {

note the < and not a <=

answered Feb 2, 2013 at 20:17

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

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

1 Comment

Slippery John Over a year ago

Well now I feel like a MASSIVE idiot. Still, thanks for the help!

Jonast92 · Accepted Answer · 2013-02-02 20:28:42Z

I recommend using a for loop and defining the whole block of returned data to be defined as a single set, for example, data.

And use the following method:

$.ajax(
{
    // Post variable1 to url.
    type : 'post',
    url : 'urlToBackend,
    dataType : 'json',
    data : 
    {
        'variable1' : 'theValue'
    },
    success : function(data)
    {
        var message;
        var reply1;
        var reply2;

        for(var i = 0; i < data.length; i++)
        {
            reply1 = data[i].reply1FromBackend; // Assuming that reply1FromBackend was returned.
            reply2 = data[i].reply2FromBackend; // Assuming that reply2FromBackend was returned.

            message += reply1;
            message += reply2;
        }
        // do something
    },
    complete : function(data)
    {
        // do something
    }
});

So you just have to make sure that the url is valid, that the backend can do something with the variable1 and that the backend echos reply1FromBackend and replyFromBackend, like this:

// Receive the posted variable's value if it is set.
$variable1= isset($_POST['variable1']) ? $_POST['variable1'] : false;

// ... do something

$json[] = array
(
    'reply1FromBackend' => 'yo',
    'reply2FromBackend' => 'sup'
);
echo json_encode($json);
flush();

Did that help?

Collectives™ on Stack Overflow

Dynamically retrieving information from JSON using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related