parse array of json objects in jquery

Question

I have an array that contains 3 json objects: it looks like this:

PHP Code:

echo json_encode(array(
   'BigArea' => $BigArea_Obj,
   'Categories' => $Categories_Obj,
   'Sub_Categories' => $Sub_Categories_Obj
));

The Real Json Contains the main 3 entities (BigArea, Categories, Sub_Categories)

{
"BigArea":

[{"area_id":"1","area_name":"Beirut","country_id":"1"},{"area_id":"2","area_name":"North Maten","country_id":"1"}],

"Categories":

[{"categ_id":"2","categ_name":"Actvities","categ_pic":"1-1024.jpg","categ_big_area_id":"1","big_area_id":"1"},{"categ_id":"6","categ_name":"Hotels","categ_pic":"2-1024.jpg","categ_big_area_id":"1","big_area_id":"1"},{"categ_id":"5","categ_name":"Restaurants","categ_pic":"002_1024.jpg","categ_big_area_id":"1","big_area_id":"1"}],

"Sub_Categories":

[{"categ_id":"2","product_id":"5","product_name":"dr pepsi","product_pic_thumb":"","prod_categ_id":"2","small_area_id":"1"},{"categ_id":"5","product_id":"6","product_name":"Sushi","product_pic_thumb":"","prod_categ_id":"5","small_area_id":"1"}]

}

What i need is to loop over each object so I used the below but it didnt work properly to me:

$.ajax({
type: "POST",
url: "server/bigarea_categ_subcateg.php",
dataType: "json",
data: CountryId,
success: function (b) {
BigArea_Categ_Sub_Object = b;
$.mobile.changePage("#BigAreaPage", { changeHash: false });
}
});

var BigArea_Object = BigArea_Categ_Sub_Object.BigArea;
var Categories_Object = BigArea_Categ_Sub_Object.Categories;
var SubCategories_Object = BigArea_Categ_Sub_Object.Sub_Categories;

$.each(BigArea_Object, function (index, value) {

 ...

  $.each(Categories_Object, function (index, value) {

   ...

    $.each(SubCategories_Object, function (index, value) {

     ...

Any help is much appreciated

penartur · Accepted Answer · 2012-05-12 07:05:31Z

1

AJAX stands for asynchronous (non-blocking) requests. That means that immediately after the call to $.ajax there is no BigArea_Categ_Sub_Object.

You should move all the code starting with var BigArea_Object = BigArea_Categ_Sub_Object.BigArea; into a success function body (which is called once the response from server is available). E.g.

$.ajax({
    type: "POST",
    url: "server/bigarea_categ_subcateg.php",
    dataType: "json",
    data: CountryId,
    success: function (b) {
        BigArea_Categ_Sub_Object = b;
        $.mobile.changePage("#BigAreaPage", { changeHash: false });
        var BigArea_Object = BigArea_Categ_Sub_Object.BigArea;
        var Categories_Object = BigArea_Categ_Sub_Object.Categories;
        var SubCategories_Object = BigArea_Categ_Sub_Object.Sub_Categories;

        $.each(BigArea_Object, function (index, value) {

        ...

        $.each(Categories_Object, function (index, value) {

        ...

        $.each(SubCategories_Object, function (index, value) {

        ...
    }
});

answered May 12, 2012 at 7:05

penartur

9,9325 gold badges41 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Charbel Obeidi Over a year ago

Hi penartur. Please note that BigArea_Categ_Sub_Object is declared as a global variable and I am able to access it as shown in my original code. What I need is to loop over those 3 objects independently.

penartur Over a year ago

@CharbelObeidi "Please note that BigArea_Categ_Sub_Object is declared as a global variable and I am able to access it as shown in my original code" - yes, you're able to access it, but it will have its value filled only on ajax response. In your code, you're iterating on whatever was BigArea_Categ_Sub_Object prior to ajax call. "What I need is to loop over those 3 objects independently" - what do you mean by "independently"?

Charbel Obeidi Over a year ago

BigArea_Object, Categories_Object and SubCategories_Object are 3 objects that contain json data. I want to display first the BigArea in a collapsible div then the Categories_Object in a sub collapsible div and finally the SubCategories_Object in a list view. So it would be: BigArea Categories Sub Categories

penartur Over a year ago

@CharbelObeidi So what is your problem? What have you tried, and what was the result?

Collectives™ on Stack Overflow

parse array of json objects in jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related