json array in jquery return data undefined

Question

I'm trying to pull data to continously refresh some news from a source

data.php

$fecha = $_GET['fecha'];
$feed = array();

$result = mysql_query("SELECT * FROM envivo WHERE fecha >= '".$fecha."' ORDER BY fecha DESC");
$existe = mysql_num_rows($result);

if ($existe != 0) {

    while ($data = mysql_fetch_array($result)) {
        $jsondata = array();
        $jsondata['titulo'] = $data['titulo'];
        $jsondata['link'] = $data['link'];
        $jsondata['fuente'] = $data['fuente'];

        $feed[] = $jsondata;
    }

    echo json_encode($feed);
}

live.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
function restults(data) {
    $(data).each(function() {
        $("#envivo").append("<li>Titulo: " + data.titulo + " Link: " + data.link + " Fuente: " + data.fuente + "</li>");
    });
}
$(document).ready(function(){
    var fecha = Math.round((new Date()).getTime() / 1000);
    setInterval(function() {
        $.ajax({
            data: "fecha="+fecha,
            type: "GET",
            dataType: "json",
            url: "data.php",
            success: function(data){
               restults(data);
            }
        });
    }, 5000);
});
</script>
</head>
<body>
<div id="envivo">
</div>
</body>
</html>

When running index.php, data.php it's called via ajax, and it returns something like this

[{"titulo":"Test 1302662957","link":"http:\/\/www.google.com","fuente":"Zuker"},{"titulo":"Test 1302662957","link":"http:\/\/www.google.com","fuente":"Zuker"},{"titulo":"Test 1302662631","link":"http:\/\/www.google.com","fuente":"Zuker"}]

Everything fine at this point... now i'll try to retrieve and append that data

on firebug console

[{"titulo":"Test 1302662957","link":"http:\/\/www.google.com","fuente":"Zuker"},{"titulo":"Test 1302662957","link":"http:\/\/www.google.com","fuente":"Zuker"},{"titulo":"Test 1302662631","link":"http:\/\/www.google.com","fuente":"Zuker"}]

So it's fine... but when using

$(data).each(function() {
    $("#envivo").append("<li>Titulo: " + data.titulo + " Link: " + data.link + " Fuente: " + data.fuente + "</li>");
});

i'm getting undefined for each value... any ideas?

thanks in advance

Alex · Accepted Answer · 2011-04-13 02:55:45Z

8

$.fn.each() is designed to iterate over dom elements. You want $.each(), which iterates over any generic collection, like an array of objects, for example. Change your .each() code to something like this:

$.each(data, function(index, data) {
  $("#envivo").append("<li>Titulo: " + data.titulo + " Link: " + data.link + " Fuente: " + data.fuente + "</li>");
});

answered Apr 13, 2011 at 2:55

Alex

66.3k49 gold badges154 silver badges181 bronze badges

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

1 Comment

Frederik Prijck Over a year ago

Saved my girlfriends day. Trying to help her with her Json + php thing! :) Great !

Collectives™ on Stack Overflow

json array in jquery return data undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related