Question

I’m playing around with some YQL, and getting the returned result returned as JSON. Therefore I’m trying to run though it using some JavaScript. Everything works fine, but when it comes to one single element I’d like to grab, my JavaScript code breaks.

This is a piece of my JSON:

cbfunc({
    "query": {
        "count": 30,
        "created": "2011-12-22T20:48:45Z",
        "lang": "en-US",
            "diagnostics": {
                "publiclyCallable": "true",
                "url": {
                    "execution-start-time": "1",
                    "execution-stop-time": "2214",
                    "execution-time": "2213",
                    "proxy": "DEFAULT",
                    "content": "http://www.example.com"
                },
                "user-time": "2254",
                "service-time": "2213",
                "build-version": "24402"
            },
            "results": {
                "li": [
                    {
                        "class": "item",
                        "div": [
                            {
                                "class": "onsale",
                                "p": {
                                    "class": "product-image",
                                    "a": {
                                        "href": "http://www.example.com",
                                        "title": "linktitle",
                                        "img": {
                                            "src": "http://www.example.com/image.jpg",
                                        }
                                    }
                                }
                            },
                            {
                                "class": "price-box",
                                "span": {
                                    "class": "normal-price",
                                    "span": {
                                        "class": "price",
                                        "content": "900,-"
                                    }
                                }
                            }
                        ],
                        "h5": {
                            "a": {
                                "href": "http://www.example.com",
                                "content": "Link content"
                            }
                        },
                    },
                    {
                        "class": "item",
                        "div": [
                            {
                                "class": "onsale",
                                "p": {
                                    "class": "product-image",
                                    "a": {
                                        "href": "http://www.example.com/2.html",
                                        "title": "Link title",
                                        "img": {
                                            "src": "http://www.example.com/image2.jpg",
                                        }
                                    }
                                }
                            },
                            {
                                "class": "price-box",
                                "span": {
                                    "class": "normal-price",
                                        "span": {
                                            "class": "price",
                                            "content": "812,-"
                                        }
                                    }
                                }
                            ],
                            "h5": {
                                "a": {
                                    "href": "http://www.example.com/2.html",
                                    "content": "Link 2 content"
                                }
                            },
                        }
etc.

I’m using the following piece of JavaScript code to grab the content that I want.

function cbfunc(o){
    var items = o.query.results.li;
    var output = '';
    var no_items=items.length;
    for(var i=0;i<no_items;i++){
        var img = items[i].div[0].p.a.img.src;
        var price1 = items[i].div[1];
        var price = price1.span.span.content;
        var title = items[i].h5.a.content;
        var link = items[i].h5.a.href;
        var desc = items[i].description;
        output += "<img src='" + img + "' /><h3><a href='" + link + "'>"+title+"</a></h3>" + price + "<hr/>";
    }
    // Place product in div tag
    document.getElementById('results').innerHTML = output;
}

As you can probably see, I’m running through all of the li‘s and I’m trying to print out each li‘s image, link, title and price. Almost everything works, but when I’m trying to grab the price of each product, my JavaScript breaks. I’ve found out that one or two of the li‘s that I’m iterating through, hasn’t got the span.span.content, instead they’ve got a p.span.content. This means that in some cases the code can’t find the span.span.content, and then it breaks.

Why does this happen? Is there a solution to what I can do to make this not break? Is it possible to have some kind of default fallback to the items that haven’t got the span.span.content or something like that?

Answer 1

Can’t speak to why it’s coming down like this, but this would fix just that scenario:

var price = price1.span ? price1.span.span.content : price1.p.span.content;

Or slightly more compact:

var price = (price1.span ? price1.span : price1.p).span.content;

Or if there could be other kinds of spans you want to avoid and need to be more thorough:

var price = price1.span && price1.span.span && price1.span.span.content ? price1.span.content : (price1.p && price1.p.span && price1.p.span.content ? price1.p.span.content : null);

Or you could break it out of ternary if that’s too much to look at:

var price;

if (price1.span && price1.span.span && price1.span.span.content) {
    price = price1.span.content;
} else if (price1.p && price1.p.span && price1.p.span.content) {
    price = price1.p.span.content;
} else {
    price = null;
}

Finally, if you’re okay with price being undefined, you could shorten the above slightly with this:

var price;

if (price1.span && price1.span.span) {
    price = price1.span.content;
} else if (price1.p && price1.p.span) {
    price = price1.p.span.content;
} else {
    price = null;
}