handling different json formats

by smingers

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="sidebar">
    <h4>ingredients</h4>
    <ul class="ingredients list-unstyled">
    </ul>
</div>

CSS

.sidebar {
    margin-left: 15px;
    width: 300px;
}

.sidebar ul {
    color: #777777;
    font-size: 13px;
    padding-left: 15px;
    line-height: 1.75;
}

.sidebar li {
    padding-left: 1em;
    text-indent: -1em;
}

JavaScript

//modifying nate's example for handling different json formats to be more like my project

/*
my current code for constructing the ingredients list:

HTML:
        <h4>ingredients</h4>
        <ul class="ingredients list-unstyled">
            <li></li>
        </ul>

JS (before):
        for (i = 0, length = recipe.ingredients.length; i < length; i++) {
            $('.ingredients').append('<li>' + recipe.ingredients[i] + '</li>');
        }

JS (after):
for (i = 0, length = recipe.ingredients.length; i < length; i++) {
            if (typeof recipe.ingredients[i] === 'string') {
                $('.ingredients').append('<li>' + recipe.ingredients[i] + '</li>');
            } else {
                $('.ingredients').append('<h6>' + recipe.ingredients[i].category + '</h6>');
                for (var j = 0, length2 = recipe.ingredients[i].ingredients.length; j < length2; j++) {
                    $('.ingredients').append('<li>' + recipe.ingredients[i].ingredients[j] + '</li>');
                }
                $('.ingredients').append('<br>');
            }

*/

var recipe = {
    ingredients: [
        "eye of newt",
        "wing of bat",
        {
            category: "leaven",
            ingredients: [
                "1 tbsp mature starter",
                "200 g 75° water",
                "100 g white flour",
                "100 g whole wheat flour"
            ]
        },
        "700 g plus 50 g (27 oz) 80° water long long long long long",
        "200 g leaven",
        "900 g white flour",
        "100 g whole wheat flour",
        "20 g salt"
    ]
}

var $ingredients = $('.ingredients');

console.log('recipe', recipe);
var ingredient;

$.each(recipe.ingredients, function (i, ingredient) {
    
    if (typeof ingredient === 'string') {
        
        // Build a simple list item
        $ingredients.append($('<li>', {
            text: ingredient
        }));
        
    } else {
        var $category = $('<li>');
        var $list = $('<ul...