How to parse json encoded html data to simple html in jquery

Question

I tried some of the examples but couldn't get it to work. I have a script that produces HTML results and those results are fetched by Ajax request. But the fetched results are escaped therefore not working as normal HTML.

PHP (Just a small part)

if($count > 0){
    echo json_encode(array('heading' => '<div id="found">Here is all!</div>', 'list' => $thelist));
}
else{
    echo json_encode(array('heading' => '<div id="empty_storage"><img src="icon.png"><br>Its lonely here!</div>', 'list' => $thelist));
}

AJAX/ JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //$("#list").html('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');
    setInterval(function(){
        $.ajax({
               type: "GET",
               url: "generate_list.php",
               dataType:"json",
               cache: false,
               success: function(result){
                     result = JSON.parse(result);
                     $("#list ul").html(result['list']);
               }
        });
    }, 1000);
});
</script>

HTML

<div id="list">
<ul>
</ul>
</div>

ERROR IN CONSOLE

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

UPDATE:

Error removed but when I try to show the data in the html tags only one shows up.

<script type="text/javascript">
$(document).ready(function(){
    //$("#list").html('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');
    setInterval(function(){
        $.ajax({
               type: "GET",
               url: "generate_list.php",
               dataType:"json",
               cache: false,
               success: function(result){
                     $("#list").html(result.heading);
                     $("#list ul").html(result.list);
               }
        });
    }, 1000);
});
</script>

WHAT $thelist CONTAINS

    $thelist .= '<li><span class="type">'.$extn.'</span><span class="link"><a href=./storage/'.$namehref.'>'.$name.'</a></span><span class="size">'.$size.'</span><span class="fa fa-trash-o fa-fw" aria-hidden="true"></span>
</li>';

XeNo13GrIn · Accepted Answer · 2016-06-10 10:42:20Z

1

Since you already added the

dataType:"json"

There will be no need to use

JSON.parse();

result in success is already formatted as JSON.

Also to use the list property of your JSON.

result.list

     $("#list ul").html(result.list);

edited Jun 10, 2016 at 10:42

answered Jun 10, 2016 at 9:48

XeNo13GrIn

1225 bronze badges

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

7 Comments

Ayan Over a year ago

ok why is it that when I fetch list and heading together then only one show up? Check the edited question.

XeNo13GrIn Over a year ago

Is your list an array?

Ayan Over a year ago

You missed a paranthesis somewhere. Will this work for a set of html list? Wont it keep appending the whole set everytime the page is refreshed?

Peter Chaula Over a year ago

I thing a simple $(json.heading) will do here

XeNo13GrIn Over a year ago

In that case just append(result.list) or just .html(result.list). I updated again.

|

Collectives™ on Stack Overflow

How to parse json encoded html data to simple html in jquery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related