javascript JSON advanced

Question

I can't find the bug. May be you can help me: My code is below:

var data  = {"product":[{"config":[{"id":"1","price":"100","sku":"10548796345","manufacturer":"Apple","name":"Product 1", "description":"Web site has two parts: the Site (which is what your site visitors see) and the Administrator (which is where you will want to do a lot of the site management). You need to log in to the Administrator separately. There is a link to the administrator on the top menu that you will see when you log .","cid":"1","qty":"102"}],"options":[{"color":[{"blue":"+10","count":"2"},{"red":"+20","count":"3"}]},{"size" :[{"S":"+10","count":"1"},{"M":"+20","count":"4"},{"L":"+30","count":"5"},{"XL":"+40","count":"2"}]}]},{"config":[{"id":"2","price":"100","sku":"10548796341","manufacturer":"Apple","name":"Product 2", "description":"Web site has two parts: the Site (which is what your site visitors see) and the Administrator (which is where you will want to do a lot of the site management). You need to log in to the Administrator separately. There is a link to the administrator on the top menu that you will see when you log in.","cid":"1","qty":"102"
}],"options":[{"color":[{"blue":"+10","count":"2"},{"red":"+20","count":"3"}]},{"size" :[{"S":"+10","count":"1"},{"M":"+20","count":"4"},{"L":"+30","count":"5"},{"XL":"+40","count":"2"}]}]}],"categories":[ {"id":1,"name":"Category 1", "description":"Category 1 description"}, {"id":2,"name":"Category 2", "description":"Category 2 description"}, {"id":3,"name":"Category 3", "description":"Category 3 description"}]};

Copy and paste this code to: http://json.parser.online.fr/

Code below are works.

  data.categories.each(function(c){
      var opt = new Option(c.name, c.id);               
      try {category_selector.add(opt, null)} catch (err) {category_selector.add(opt)}                          
    });

Why this code is not working as code above (return undefined):

data.product.each(function(p){

        var el = new Element('div.preview'),
            name = new Element('h3', {'html': '<a href="#!product/product?product_id='+parseInt(p.config.id)+'">' + p.config.name + '</a>'}).inject(el),
            desc = new Element('span', {'html': p.config.description}).inject(name, 'after');
            el.inject(container);   

});

P.S

If I edit my code to:

data.product.each(function(p, i){



                     var el = new Element('div.preview'),
                         name = new Element('h3', {'html': '<a href="#!product/product?product_id='+parseInt(p.config[i].id)+'">' + p.config[i].name + '</a>'}).inject(el);                         
                         el.inject(container);  

         });

It will return just 1 product and console error: p.config[i] is undefined...

P.S 2:

 data.obj[1].config.each(function(p){ 
// [1] - return first product; [2] - return second; How to return all 1 and 2?   

         var el = new Element('div.preview'),
         name = new Element('h3', {'html': '<a href="#!product/product?product_id='+parseInt(p.id)+'">' + p.name + '</a>'}).inject(el);

         el.inject(container);  

             });

<obligatory>That's not JSON, that's an object initializer</obligatory> — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2013 at 13:24
Any time you find yourself writing "...not working..." in a technical question, backspace over it and say exactly what you expected to happen, exactly what's happening instead, why you think that's wrong, and quote the output of any error reporting that's available (all major browsers have an error console now, for instance). — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2013 at 13:27

XTRUST.ORG · Accepted Answer · 2013-02-27 14:42:04Z

1

Working code is below:

for (var i=0;i<data.product.length;i++) {

                data.product[i].config.each(function(p){     

                     var el = new Element('div.preview'),
                         name = new Element('h3', {'html': '<a href="#!product/product?product_id='+parseInt(p.id)+'">' + p.name + '</a>'}).inject(el);
                         el.inject(container);  

                 });
          }

Thanks.

answered Feb 27, 2013 at 14:42

XTRUST.ORG

3,4024 gold badges37 silver badges63 bronze badges

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

1 Comment

Dimitar Christoff Over a year ago

since config is an array but it has 1 item, you can do it like so: jsfiddle.net/fFjsV

Greg · Accepted Answer · 2013-02-27 13:31:26Z

0

data.product.each will run the callback 2 times (because you have 2 objects inside). The first time, p will be the config object. The second time, it will be the options object.

You are doing things like p.config.id, this does not make sense when p is 'options'. It seems you do not need to use the each iterator at all ? Just use var p = data.product at the beginning, and remove the each iteration.

answered Feb 27, 2013 at 13:31

Greg

3,5983 gold badges21 silver badges20 bronze badges

3 Comments

XTRUST.ORG Over a year ago

How could I remove each if I have a lot of products?

Greg Over a year ago

I misread your data the first time, sorry. Your each is fine.

Greg Over a year ago

However it seems you expect it to return something. But Array.forEach (in Javascript) and Array.each (in mootools) do not return anything, so it's normal you see undefined as a result.

Collectives™ on Stack Overflow

javascript JSON advanced

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related