Looping through array of objects and collection of Divs

[Amr87]

I have an array ob objects like this
[Object { cat="4", attr={"att1":"val1","att2":"val2","att3":"val3"}}, Object { cat="2", attr={"att1":"val1","att2":"val2","att3":"val3"}}, Object { cat="3", attr={"att1":"val1","att2":"val2","att3":"val3"}}, Object { cat="2",attr={"att1":"val1","att2":"val2","att3":"val3"}}, Object { cat="3", attr={"att1":"val1","att2":"val2","att3":"val3"}}]

and I have series of divs with child divs as follow

<div class="container" data-cat="1">
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
</div>
<div class="container" data-cat="2">
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
</div>
<div class="container" data-cat="3">
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
</div>
<div class="container" data-cat="4">
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
<div class="zone" data-product=""></div>
</div>

What I want to do is to loop through the objects array and through thr divs with class "container" and see if the object inside the array has the "cat" properity similar to the data-cat attribute of the container class div , then I go inside this specific div and
output some values to the child elements with class "zone" from the attr properity of the object like inserting data-product from a value inside the attr object which corresponds to the cat value equals to the data-cat of the parent

Note That I must output these values to number of divs with class zone equals to the number of the objects wich has cat property equals to its parent data-cat attribute
for example , if I have 2 object with cat 3 , then the container class will have 2 divs with class zone filled and 2 divs are empty and so on

here is what I did , but it did not work

 // where ct is the array of objects

 $(ct).each(function(i,item){
       $(" div.container[data-cat='"+item.cat+"']").each(function(k,el){
           if ($(el).attr("data-cat") == item.cat) {
                $(el).find(".zone").eq(i).html("")
            .attr("data-product",ct[i].attr.att1)
           .append("<a class='rm_pd'>X</a>")
           .append("<img src='"+ct[i].attr.att2+"' width='"+$("div.zone").width()+"' />")
           .append("<h4>"+ct[i].attr.att3+"</h4>"); 
           }

       });
     });
    }

[ryantroop]

First, your notation seems a bit.. off? If that is supposed to be a JSON object to be parse into javascript, it's broken the moment you put = in there.

You also don't actually have a cat 1 anywhere, but you have doubled on cat 3

It seems you have a problem parsing in part due to bad notation, and in part too much complexity.

Whatever you are getting your output from, you need to clean that up first.

JSON notation is always a key:value pair and you can start with an empty object.. the structure should be more like the following, I believe...

var myArrayOfObjects = [{"cat":1, "attr":{"attr1":"val1", 
                                          "attr2":"val2",
                                          "attr3":"val3"
                                         }
                        },
                        {"cat":2, "attr":{"attr1":"val1",
                                          "attr2":"val2"
                                         }
                        ];

and so on and so forth...

Obviously, this can get very messy, long, and difficult to read. Especially since you are making duplicate values, and its all in an array... I question the need for such deep object creation, but I have done it in the past for ease of access to data types, so who am I to really question (right)?

That said, since you are doing an array of objects, your iteration is going to get a little messy, but it's totally doable since you know the structure and what you are expecting.

Since the whole thing is encapsulated in an array...

var Object;
var Category;
var Attributes;
var Attribute, Key, Value;
for (var i=0;i < myArrayOfObjects.length;i++)
{
  //do stuff for each object
  Object = myArrayOfObjects[i];
  //from here, we can check attributes of Object...
  Category = Object.cat;
  Attributes = Object.attr; //this now gets messy since you now have attr1 or attr2 or.... you get it.. so..
  //assuming we are in a "modern" browser... (otherwise you will have to bolt Object.keys via mozilla's friendly script or we can do a for..in.. as below)

  for (Key in Attributes)
    {
      Attribute = Key; //we can check it's number;
      Value = Attributes[Key]; //and the value of said attribute.
      //in here we can snoop elements, or whatever you need to do...
    }
}

Now.. you can see that this is already hard to read and very much all over the place. Also, you are using JQuery, and I am doing this in straight up javascript (mostly because I am not terribly familliar with the JQuery library).

However, I assume that you would have to iterate through using the JQuery equivalents as I have provided.

As an alternative, you could do this all server side if a possiblity, and simply render only what you need based on data you get. If you are AJAXing in data, you will be reading/redrawing and chopping up the DOM all willy nilly based on your data... which is "ok" but leaves plenty of room for making silly mistakes.

With your current code, I don't see much in ways of helping you more than I have. You will basically have to start off with a collection of all DIVs on the page, and figure out which ones have "data-cat" attibute, and then keep track of all of them and iterate through them as the need arises...

There is just way too much going on there... see if you can simplify some, and maybe through that you can figure out how to solve your own problem... :-/ sorry.

[Amr87]

Thanks mate for your effort :) , I got an idea yesterday which did all the magick and I was suprised how simple it is and wondered how I could not figure it out from the start
sorry I forgot to mark the thread as solved
here is what I did

        $(ct).each(function(i,item){
      $(" div.container").each(function(k,el){
           if ($(el).attr("data-cat") == item.cat) {

           // I used helper function 
           var collection =   get_cat_products_items(ct,item.cat);

           for(var y = 0 ; y < collection.length ;y++){
             $(el).find(".zone").eq(y).html("")
            .attr("data-product",collection[y].att1)

           .append("<a class='rm_pd'>X</a>")
           .append("<img src='"+collection[y].att2+"' width='"+$("div.zone").width()+"' />")
           .append("<h4>"+collection[y].att3+"</h4>"); 

            }
            }
           });
             });

             // the helper function

              function get_cat_products_items(ct,cat){
                var result = [];
                for(var i = 0; i < ct.length; i++){
                 if(ct[i].cat == cat){
                 result.push(ct[i].attr);
                 }
                }

                 return result;
              }

Thanks Again for your effort :)