Not able to parse the json data in the html list using ajax

advertisements

I have a news ticker which is working fine with static html data but I cant figure out how to show up dynamic data in the specified html layout. I am not being able to parse the json data into the list.

Thanks in advance.

getnews.php

<?php
include 'connect.php';
$return = array();
$sql = "SELECT * FROM news";
$result = mysqli_query($db, $sql);
while($details = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    $details_array['date'] = $details['date'];
    $details_array['headline'] = $details['headline'];
    $details_array['content'] = $details['content'];

    array_push($return, $details_array);
}
echo json_encode($return);
?>

jQuery

<script type="text/javascript">
$(function(){
    $.ajax({
        type:'GET',
        url: 'getnews.php',
        success: function(data){
            var response=JSON.parse(data);
            $(function(){
                $.each(response, function(i, item){
                    $('<ul>').append($('<li>').text(item.heading));
                });
            });
        }
    });
});
</script>

HTML news Ticker

<div id="NewsTicker">
<ul>

<li><div>23rd<br>Sep</div><headline>Expandable Input</headline>
<p><news>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</news></p>
</li>

<li><div>24th<br>Sep</div><headline>jQuery Photor Plugin</headline>
<p><news>Photor is a fast and easy jQuery plugin to create a responsive & touch-friendly full page image gallery with CSS3 transitions and transforms.</news></p>
</li>

<li><div>25th<br>Sep</div><headline>Metreaux Tables</headline>
<p><news>Metreaux Tables is a jQuery plugin to create nice, clean, themeable, andmodern Windows 8 UI Style data tables with the power of DataTables jQuery javascript library.</news></p>
</li>

</ul>


First, if you're requesting JSON with an AJAX request, you should set dataType to "json" so that you don't have to manually parse it. I.e.,

$.ajax({
    type: 'GET',
    url: 'getnews.php',
    dataType: 'json',
    success: function(data) {
        ...
    }
});

As of jQuery 1.5, you should use .done() from for the result of $.ajax() instead of passing success: .... I.e.,

$.ajax({
    type: 'GET',
    url: 'getnews.php',
    dataType: 'json',
}).done(function(data) {
    ...
});

You were very close, but you want to put your $.each() call directly inside of your success callback. Using $(function() {...}) is a short cut for $(document).ready(function() {...}) which registers the function to be called once the page has loaded. You should do:

$.ajax({
    type: 'GET',
    url: 'getnews.php',
    dataType: 'json'
}).done(function(data) {
    $.each(data, function(i, item) {
        ...
    });
});

Now, inside of your $.each() callback, you're creating a new <ul>, and adding a child <li> to it, but without actually adding it to the page. It appears to me that you intend to append each item to the <ul> under <div id="NewsTicker">. To do that, you want to do:

var $newsList = $('#NewsTicker > ul');
$.each(data, function(i, item) {
    $('<li>')
        .append($('<div>').html(item.date))
        .append($('<headline>').html(item.headline))
        .append(
          $('<p>').append(
            $('<news>').html(item.content)
          )
        )
        .appendTo($newsList);
});