Put json result from php script into divs jQuery

Question

I have two divs, each one should have a record name from a json result.

<div class="first"></div>
<div class="second"></div>

My json file is as follows :

 [{"Name":"name1","Instruction":"instr"},
 {"Name":"name2","Instruction":"instr again"}]

I want to put in the first div's value, the ‘Name‘ value of the first record, same for the second div but with the second record. I'm using jQuery :

<script>
    $(document).ready(function() {
        $.post("data/result.php",
                function(data) {
                    //alert("Data: " + data);
                    $('div.first').append(data.Name); //data.Name returns undefined
                }
        );
    });
</script>

Any help would be appreciated.

`data` is an Array -> `data[0].Name`, also make sure you are setting the correct `contentType` (`json`) when using `POST`. — m90, Jan 04 '14 at 16:16
Oh. It's not an Ajax request. use JSON.parse on data. Check this thread. http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript — andershagbard, Jan 04 '14 at 16:20

score 0 · Answer 1 · answered Jan 04 '14 at 16:29

as far as you are using post for you ajax call, the data returns as a json string, do this:

$(document).ready(function() {
    $.post("data/result.php",
            function(data) {
                data = JSON.parse(data);
                $('div.first').append(data[0].Name);
                $('div.second').append(data[1].Name);
            }
    );
});

score 0 · Answer 2 · edited Jan 04 '14 at 16:47

0

As previously mentioned you need to parse the result as json. You could use the built in parser in jquery. Like this:

<script>
    $(document).ready(function() {
        $.ajax({
        url: 'data/result.php',
        type: 'POST',
        dataType: 'json',
        success : function (data) {
            $('div.first').append(data[0].Name);
        }
        });
    });
</script>

edited Jan 04 '14 at 16:47

Zabavsky

13,340
8
54
79

answered Jan 04 '14 at 16:29

beije

841
5
11

score 0 · Answer 3 · answered Jan 04 '14 at 16:52

First of all, you can give a datatype with a request:

$.post('data/result.php',function(data) { },'JSON');

If you are not posting any information, why not just use $.get ? (it's the same syntax btw)

$.post('data/result.php',function(data) {
    var $first = $('div.first'),
        $second = $('div.second');
    $first.text(data[0].Name);
    $second.text(data[1].Name);
},'JSON');

Also, if you use .append(..) it will be appended to whatever is already in the div. If that is your intention, use .append(...). However, if you want to replace the content of it, even if it is empty, use .text(...) or .html(...)

Put json result from php script into divs jQuery

3 Answers3