Getting List Result From JSON Array

Question

After getting the first row result from JSON array, I need to print the all result using jquery each method.

here's my syntax

 $(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);
});

The data.content[0] is showing the first row only with looping. But the data it self not changed. How to solve the data.content[0].title, so the row is printed like in database?

UPDATE

After creating some tweak to my function, i have added new feature to show the result using list.

Here's the syntax

$(document).ready(function () {
    //function to get the result from user-input
    $("#btnsearch").click(function() {
        valobj = $('#search_box').val();
        $.getJSON("search.php", { q : valobj }, function(data,result){
            //show result from database
            $.each(data.content, function(index, value) {
                $("#divContent").show();
                var li = $("<li><a></a><br /><p></p></li>");
                $("#posting").append(li);
                    $("a",li).text(value.title);
                    $("p",li).text(value.intro_text);           
            });

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

The question is, how i can reset the result from if, we want to show based on another keyword, so the list is clear if user type new keywords? without refreshing the browser.

thank you.

UPDATE 2

  $(document).ready(function () {
    //function to get the result from user-input
    $("#btnsearch").click(function() {
        //clear the div
        $("#divContent").html("");

        valobj = $('#search_box').val();
        $.getJSON("search.php", { q : valobj }, function(data,result){
            //show result from database
            $.each(data.content, function(index, value) {
                $("#divContent").show();
                var li = $("<li><a></a><br /><p></p></li>");
                $("#posting").append(li);
                    $("a",li).text(value.title);
                    $("p",li).text(value.intro_text);           
            });  
            //end show result
        }, JSON);
    });

That's not how `$.each` method is supposed to be used, refer to it's documentation. — Ram, Jun 17 '13 at 11:15
@undefined i see the syntax from here: http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript — randytan, Jun 17 '13 at 11:17

score 0 · Accepted Answer · answered Jun 17 '13 at 11:15

0

In the each you can capture the element at the current iteration:

$.each(data.content, function(i, val) {
    $('.toprightsec')
        .append("Title" + val.title)
        .append("Intro" + val.intro_text);
});

answered Jun 17 '13 at 11:15

MrCode

63,975
10
90
112

score 0 · Answer 2 · answered Jun 17 '13 at 11:19

0

In the $.each function there are two arguments. first one is index and second one is value.

Like this:

$.each(data.content, function(index,value) {
   alert(value);
}

and you can use them as a variables and in your case the each loop will be execute like this:

$.each(data.content, function(index, value) {
    $('.toprightsec')
        .append("Title" + value.title)
        .append("Intro" + value.intro_text);
});

answered Jun 17 '13 at 11:19

Code Lღver

15,573
16
56
75

thanks for your answer, but mrcode is write the first answer, i will mark the answer to his/her answer. Thank you for your support Gaurav! – randytan Jun 17 '13 at 11:27
@randytan no prob. as you wish. I just elaborate the answer. and the reason. – Code Lღver Jun 17 '13 at 11:28
i have tweak the code so that it can show based on list. But how to make the div clear after new keyword was inserted without refreshing the browser? – randytan Jun 17 '13 at 12:26
use `$("#id").html("");` this will clear the contents of div. – Code Lღver Jun 17 '13 at 12:30
thanks for your answer, but how i implement the div clear? it makes the function against each other, so nothing shows up. please see the update 2 if you don't mind. – randytan Jun 17 '13 at 12:40
@randytan you are clearing the `divContent` and putting the content in `posting` div. it is not understandable to me. what you want to do? – Code Lღver Jun 17 '13 at 15:32
the logic is when user clicks the button, the user clear the div area then add another value to the list. Or i need to remove the list only? – randytan Jun 18 '13 at 02:45

Getting List Result From JSON Array

2 Answers2

Linked