how to make loop of json data from php using ajax

Question

In my php file

foreach($qry_1 as $v)
{       
    $subcat=array('title'=>$v['title'],'cat_id'=>$v['cat_id']);
    echo json_encode($subcat);
}

in my jquery file

$.ajax({
    type:'POST',
    url:"php/process.php",
    data:{cat_id:cat_id},
    dataType:"json",
    success: function(data){

        //how to loop through data to show in div
    });        
}
})

in my html file

<div id="title">

</div>

i want to show my json data in div so how can i loop through the json data received from php at jquery and how can i show it in my html file

You probably shouldn't be outputting multiple JSON blocks in the same PHP file. Put each `$subcat` in to an array and then output the whole array otherwise you will not be able to parse the JSON since it will be invalid. — Chris, Mar 27 '16 at 16:58
^ that, echoing JSON in a loop produces invalid JSON, and had you added an error handler to that ajax call, you would have seen that — adeneo, Mar 27 '16 at 17:00
{"title":"mobile","cat_id":"9"}{"title":"pendrive","cat_id":"10"} this is my response which i get @Chris — priyabrata sen, Mar 27 '16 at 17:02
{"title":"mobile","cat_id":"9"}{"title":"pendrive","cat_id":"10"} this is my response which i get @user2950720 — priyabrata sen, Mar 27 '16 at 17:03
@priyabratasen As I said, add each `$subcat` to an array and then output the whole JSON encoded array. — Chris, Mar 27 '16 at 17:09
You iterate first, and then, you `echo json_encode()` ***once***, and only ***once***, *always* ! — adeneo, Mar 27 '16 at 17:10
Possible duplicate of [how to parse json data with jquery / javascript?](http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript) — Kamal Joshi, Mar 27 '16 at 18:27

score 1 · Answer 1 · answered Mar 27 '16 at 17:14

1

try changing php to:

foreach($qry_1 as $v)
{   
    // add to subcat array in each iteration    
    $subcat[]=array('title'=>$v['title'],'cat_id'=>$v['cat_id']);

}
//output final array
echo json_encode($subcat);

Then in ajax callback:

$.each(data, function(_, item){
    $('#title').append('<p> Title: ' + item.title + '</p>'); 
});

answered Mar 27 '16 at 17:14

charlietfl

170,828
13
121
150

thank you @charlietfl working perfect but when i use it in dropdown button ie. when i change category dropdown button i got the above json array in another dropdown button but when i again change the category the pevious array not change and it shows along with current array kindly guide me how to destroy previous array – priyabrata sen Mar 27 '16 at 17:37
1

use `empty()` first if you will be changing content – charlietfl Mar 27 '16 at 17:38
can u tell me in which i will put empty() it shows error in php @charlietfl – priyabrata sen Mar 27 '16 at 17:43
can u tell me in which i will put empty() it shows error in php @charlietfl – priyabrata sen Mar 27 '16 at 17:59

how to make loop of json data from php using ajax

1 Answers1