Getting Result From JSON, JQUERY Not functioning

Question

I have some problem. I have created some app that consuming JSON array.

The syntax is using Jquery 1.9

The logic is : getting values from textbox (valobj variable below) then write to toprightsec div area.

$("#btnsearch").click(function() {
        valobj = $('#search_box').val();
        $.getJSON("search.php", { q : valobj }, function(data,result){
            //show result from database
            $('toprightsec').append("Title" + data.title)
                            .append("Intro" + data.intro_text);
            //end show result
        }, JSON);
    });

JSON array is from PHP result. some example

{"content":[{"title":"Test Post 100","intro_text":"Intro Test"}]}

But, it's not working. any helps?

thanks in advance.

UPDATE

$("#btnsearch").click(function() {
    valobj = $('#search_box').val();
    $.getJSON("search.php", { q : valobj }, function(data,result){
        //show result from database
        $('.toprightsec').append("Title" + data.content[0].title)
                        .append("Intro" + data.content[0].intro_text);
        console.log(data)
        //end show result
    }, JSON);

UPDATE 2

$(document).ready(function () {

    $("#btnsearch").click(function() {
    valobj = $('#search_box').val();
    $.getJSON("search.php", { q : valobj }, function(data,result){
        //show result from database
        $.each(data.content, function() {
            $('.toprightsec').append("Title" + data.content[0].title)
                        .append("Intro" + data.content[0].intro_text);
        });

        //end show result
    }, JSON);
});

hi @x4rf41 it's not working. The section content still the same. nothing changed — randytan, Jun 17 '13 at 10:21
Try using `console.log(data)` to look at the structure of the JSON in JS. — casraf, Jun 17 '13 at 10:21

Code Lღver · Accepted Answer · 2013-06-17T10:35:30.603

2

Use the following code:

 $('.toprightsec').append("Title" + data.content[0].title)
                            .append("Intro" + data.content[0].intro_text);

instead of:

 $('toprightsec').append("Title" + data.title)
                            .append("Intro" + data.intro_text);

If toprightsec is id then use the # and if class then use the .. here you have not specify that.

edited Jun 17 '13 at 10:35

answered Jun 17 '13 at 10:21

Code Lღver

15,573
16
56
75

maybe his selector is wrong too. what would this `$('toprightsec')` select ? – x4rf41 Jun 17 '13 at 10:22
@x4rf41 I have mention about it in the answer. hope this will be understandable to OP. – Code Lღver Jun 17 '13 at 10:24
hi @x4rf41 the toprightsec is a class. please see the update section – randytan Jun 17 '13 at 10:33
@randytan then use the `.` before the toprightsec and is there only one tag or more than one with this class name? – Code Lღver Jun 17 '13 at 10:35
only one class:
Content for class "toprightsec" Goes Here
– randytan Jun 17 '13 at 10:37
@randytan have you tried my answer. if yes then what you get? – Code Lღver Jun 17 '13 at 10:39
aha, thanks @GauravVashishtha for answer, but it still showing only first array? coz of [0] how if i want to show all the array list? – randytan Jun 17 '13 at 10:44
@randytan you can use the `$.each` loop of jQuery. read it from here http://api.jquery.com/jQuery.each/ – Code Lღver Jun 17 '13 at 10:49
@GauravVashishtha hi, i have try to use function each, but the result is looping the array[0], how to make it dynamic array? thanks gaurav pls see UPDATE 2 thanks – randytan Jun 17 '13 at 10:56
@randytan you need to pass the function(index,value){} arguments in each function. and alert them to check the values. – Code Lღver Jun 17 '13 at 11:11
@gaurav, i think my second question is different, so i create new thread to make it clear. http://stackoverflow.com/questions/17146122/getting-list-result-from-json-array – randytan Jun 17 '13 at 11:14

score 0 · Answer 2 · answered Jun 17 '13 at 10:22

You are using json array,so you have to access single array element and not whole array:

json_array.title //WRONG 
json_array[0].title //OK

Try something like:

$("#btnsearch").click(function() {
        valobj = $('#search_box').val();
        $.getJSON("search.php", { q : valobj }, function(data,result){
            //show result from database
            if (data.length){
                var _props = data.pop().content;
                $('toprightsec').append("Title" + _props.title)
                                .append("Intro" + _props.intro_text);
            }
            //end show result
        }, JSON);
    });

there is another one :D `var _props = data.pop().content;` should be `var _props = data.content.pop();` — x4rf41, Jun 17 '13 at 10:30

Getting Result From JSON, JQUERY Not functioning

2 Answers2