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

• T.J. Crowder: <obligatory>That's not JSON, that's an object initializer</obligatory>
• XTRUST.ORG: And where is a problem?
• Amberlamps: I cannot see any function returning anything.
• epascarello: Did you add console lines and see what is happening?
• T.J. Crowder: 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).

Answer 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.

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

Answer 2

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.

• XTRUST.ORG: How could I remove each if I have a lot of products?
• Greg: I misread your data the first time, sorry. Your each is fine.
• Greg: 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.