Create HTML from JSON object

Question

Here I have sme .ajax function that work well:

 $( document ).ready(function() {
$('a#kom').click(function (e) {
    var tabela = 'parcele';
      $.ajax({
            url: "getComments.php",
            type: "POST",
            async: true, 
            data: { ajdi:ajdi,tabela:tabela}, //your form data to post goes here as a json object
            dataType: "html",

            success: function(data) {
            console.log(data);  
            },
            error:function(data) {
            console.log(data); 
            }
        });

        });
        });

and this function produce this JSON:

[{"datum":"2014-05-22","komentar":"Testiranje za komentare da vidimo kako moze da sluzi, dali radidobro, bla bla bla bla bla bla bla bla bla bla bla bla ... ..."}]

Iknow its a basic question but I cant find any good resource... How I can into .ajax function when function is success to create this html:

'<div class="notes">
        <h4>Tekst zaglavlje</h4>
        <h5>'+datum+'</h5>
        <p>'+komentar+'</p>
    </div>'

for every object I get from JSON... so like that:

            success: function(data) {
            // CREATE A HTML FROM JSON DATA FOR EACH JSON OBJECT. HOW?
            console.log(data);  
            },

UPDATE WITH PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 

    try {


     $result = $db->prepare("SELECT * FROM komentari WHERE id_utabeli=:ajdi AND tabela=:tabela");
     $result->execute(array(':ajdi' => $_POST['ajdi'], ':tabela' => $_POST['tabela']));
    $result = $result->fetchAll(); 

     $temp = array();
foreach($result as $r) {

          $temp[] = array('datum' => (string) $r['datum'], 'komentar' => (string) $r['komentar']); 

        }
    $table = $temp;
    $jsonTable = json_encode($table);
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    echo $jsonTable;
}
    else { 
echo 'ERROR 404';
  }

Read this developer.mozilla.org/en-US/docs/Web/API/document.createElement — Klemen Tusar
– Klemen Tusar, Commented May 23, 2014 at 8:47

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You have a wrong dataType that should be:

dataType: "json",

because response is json not a html.

In your success function do this:

success: function(data) {
    var htm = '';  
    $.each(data, function(i, resp){
        htm +='<div class="notes">' + 
                 '<h4>Tekst zaglavlje</h4>' +
                 '<h5>'+resp.datum+'</h5>' +
                 '<p>'+resp.komentar+'</p>' +
             '</div>';
    }); 
    $('yourContainer').html(htm);
},

As your response seems to be an array [{},{}....] or multiple javascript objects so to produce such html markup you have to loop in that array with $.each() method and declare one blank var htm=''; before $.each() iteration and concatenate the resulting html out of your json, then place at the position of your container which can hold the produced html.

Find a Demo @ Fiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 23, 2014 at 8:53

Jai

74.8k12 gold badges76 silver badges104 bronze badges

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

9 Comments

gmaestro Over a year ago

I get; Uncaught TypeError: Cannot use 'in' operator to search for '162' in [{"datum":"2014-05-22","komentar":"Testiranje za komentare da vidimo kako moze da sluzi, dali radidobro, bla bla bla bla bla bla bla bla bla bla bla bla ... ..."}]

gmaestro Over a year ago

why this is not a safe way, open XSS?

Jai Over a year ago

Then you have posted a wrong json object. Then it might be {},{}... instead of [{}, {} ...].

Jai Over a year ago

@gmaestro why do you have a dataType: "html"? Wouldn't it be "json".

gmaestro Over a year ago

Is this now a safe way to create HTML from JSON?

|

sjkm · Accepted Answer · 2014-05-23 09:00:44Z

2

Since you're using jquery, you can do this like follows:

$( document ).ready(function() {
    $('a#kom').click(function (e) {
        var tabela = 'parcele';
        $.ajax({
            url: "getComments.php",
            type: "POST",
            async: true, 
            data: { ajdi: ajdi, tabela: tabela },
            dataType: 'json',
            success: function(data) {
                console.log(data);  

                $.each(data, function(i, item) {
                    // create html
                    var elem = '<div class="notes">
                                    <h4>Tekst zaglavlje</h4>
                                    <h5>' + item.datum + '</h5>
                                    <p>' + item.komentar + '</p>
                                </div>'

                    $('body').append(elem); // append the item
                });
            },
            error: function(data) {
                console.log(data); 
            }
        });
    });
});

edited May 23, 2014 at 9:00

answered May 23, 2014 at 8:50

sjkm

3,9572 gold badges28 silver badges43 bronze badges

9 Comments

gmaestro Over a year ago

say: Uncaught SyntaxError: Unexpected token ILLEGAL

gmaestro Over a year ago

I change only this: $('#komenatri').append(elem);

sjkm Over a year ago

extended it a little bit. please try again.

gmaestro Over a year ago

what that means: Uncaught TypeError: Cannot use 'in' operator to search for '162' in [{"datum":"2014-05-22","komentar":"Testiranje za komentare da vidimo kako moze da sluzi, dali radidobro, bla bla bla bla bla bla bla bla bla bla bla bla ... ..."}]

sjkm Over a year ago

changed the code. it was not expecting json thus data was not an object. now it should work.

|

nettux · Accepted Answer · 2014-05-23 09:23:23Z

1

Your success function should look like this:

success: function(data) {
    notes_div = $("<div/>");
    hfour = $("<h4/>").text("Tekst zaglavlje");
    hfive = $("<h5/>").text(data.datum);
    para = $("<p/>").text(data.komentar);
    notes_div.append(hfour).append(hfive).append(para);
    $('#komenatri').append();
},

Other answers provided that just build your HTML as a string are not safe. They open you up to XSS (google it ;) ) but we fix that by making elements as JQuery objects and setting their .text() which makes the resultant content HTML safe.

You should also run your data through htmlspecialchars() in PHP before outputing it.

change:

$temp[] = array('datum' => (string) $r['datum'], 'komentar' => (string) $r['komentar']);

To

$temp[] = array('datum' => htmlspecialchars( (string) $r['datum'] ), 'komentar' => htmlspecialchars( (string) $r['komentar']) );

This will prevent users from injecting their own HTML into your pages with their comments.

edited May 23, 2014 at 9:23

answered May 23, 2014 at 8:59

nettux

5,4444 gold badges26 silver badges34 bronze badges

4 Comments

gmaestro Over a year ago

yes but this is incomplete answer, becuse I need to make html for every JSON object also I need to add it into ID=komentari

gmaestro Over a year ago

hm, dont ork, just nothing happend... is there some sintaks error?

nettux Over a year ago

@gmaestro I've changed my answer so that the resultant HTML goes into '#komentri' can you clarify. What do you mean by every object returned? in the success function does data contain info for one form or all forms??

nettux Over a year ago

@gmaestro you tell me. If you open your web developer console do you get an error? Does an element with the id 'komenatri' exist?

Tom · Accepted Answer · 2014-05-23 09:13:48Z

0

success: function(data) {
    for(var i = 0, ceiling = data.length; i < ceiling; i++) {
        document.getElementById("komenatri").innerHTML += 
            "<div class=\"notes\"><h4>Tekst zaglavje</hr><h5>" + 
            data[i].datum + 
            "</h5><p>" + 
            data[i].komentar + 
            "</p></div>";
    }
}

edited May 23, 2014 at 9:13

answered May 23, 2014 at 8:55

Tom

4,1602 gold badges26 silver badges40 bronze badges

1 Comment

nettux Over a year ago

I'm not the downvoter but I'd imagine it's because you've provided a pure JavaScript onlclick answer when what's needed is clearly a JQuery one with an AJAX success function. Bit nasty not leave a comment first though...

Collectives™ on Stack Overflow

Create HTML from JSON object

4 Answers 4

Find a Demo @ Fiddle

9 Comments

9 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

9 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related