Question

I have a problem when sending a json array to my jquery script where I want to append it to a div. In php I created a json array containing the following html code:

<li id="1234">
   <span class="some">$1</span>
   <span class="some2">$1</span>
   <div class="somediv"></div>
</li>

So the whole json array looks like this:

[{"id":"12435","text":"<li id=\"1234\"><span class=\"some\">$1</span>"},{"id":"13542","text":"<span class=\"some2\">$1</span><div class=\"somediv\"></div></li>"}];

Now I used getJSON to get the json object and then I append the result to a div like this: $(".container").append(val);

Now the problem is that somehow when trying to append the JSON results, this is what is beeing appended:

<li id="1234">
   <span class="some">$1</span>
</li>
<li id="1234">
   <span class="some2">$1</span>
   <div class="somediv"></div>
</li>

When I try to output my val with alert(val) it clearly shows that the json result is correct (without the closing <li> tag), but when appending it, the <li> tag is added.

Does anyone have any idea what could be the reason for this?

This is how I get the values from my php file:

$.getJSON("../ajax.php?action=getresults", function(data)
        {
            var obj = $.parseJSON(data);

            $.each(obj, function(key,val)
            {
                $.each(obj[key], function(key, dval)
                {
                    if(key == "text")
                    {
                        alert(dval);
                        $(".container").append(dval);
                    }
                })          

            });         

        });

Answer 1

Currently you have your html tags closing in the second array. So you are going to have to store all the html gathered into a var before appending it.

var html = '';

$.each(obj[key], function(key, dval)
{
    if(key == "text")
    {
        alert(dval);
        html += dval;
    }
});

$('.container').append(html);