## Working with Key/Value objects and Arrays

Data:

    {
      "apples" : ['Macoun','Empire','Honey Crisp','Albemarle Pippin'],
      "oranges" : ['Naval Orange','Tangelo','Clementine','Valencia Orange']
    }

Example 10.4 - Example 10.4
<h1>List of Fruits from Data</h1><div id="fruits"><!-- list goes here --></div>"use strict"; let fruits = { "apples": ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin'], "oranges": ['Naval Orange', 'Tangelo', 'Clementine', 'Valencia Orange'] }; document.addEventListener('DOMContentLoaded',function(){ buildFruitList(); }); function buildFruitList(){ let fruitList = document.createElement('ul'); for (const f in fruits) { console.log(f); let li = document.createElement('li'); li.appendChild(document.createTextNode(f)); if (Array.isArray(fruits[f])) { console.log(fruits[f]); let itemList = document.createElement('ul'); for (const item of fruits[f]) { let li = document.createElement('li'); li.appendChild(document.createTextNode(item)); itemList.appendChild(li); } li.appendChild(itemList); } fruitList.appendChild(li); } document.getElementById('fruits').appendChild(fruitList); }

- Markup
- Script
- Display

     <h1>List of Fruits from Data </h1>
     <div id="fruits"><!-- list goes here -->
     </div>

In `script` element within `head` element (`<script>`):

    "use strict";

    let fruits = {
        "apples": ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin'],
        "oranges": ['Naval Orange', 'Tangelo', 'Clementine', 'Valencia Orange']
    };
    document.addEventListener('DOMContentLoaded',function(){
        buildFruitList();
    });

    function buildFruitList(){
        let fruitList = document.createElement('ul');
        for (const f in fruits) {
            console.log(f);
            let li = document.createElement('li');
            li.appendChild(document.createTextNode(f));
            if (Array.isArray(fruits[f])) {
                console.log(fruits[f]);
                let itemList = document.createElement('ul');
                for (const item of fruits[f]) {
                    let li = document.createElement('li');
                    li.appendChild(document.createTextNode(item));
                    itemList.appendChild(li);
                }
                li.appendChild(itemList);
            }
            fruitList.appendChild(li);
        }
        document.getElementById('fruits').appendChild(fruitList);
    }

JavaScript:

    "use strict";

    let fruits = {
        "apples": ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin'],
        "oranges": ['Naval Orange', 'Tangelo', 'Clementine', 'Valencia Orange']
    };
    document.addEventListener('DOMContentLoaded',function(){
        buildFruitList();
    });

    function buildFruitList(){
        let fruitList = document.createElement('ul');
        for (const f in fruits) {
            console.log(f);
            let li = document.createElement('li');
            li.appendChild(document.createTextNode(f));
            if (Array.isArray(fruits[f])) {
                console.log(fruits[f]);
                let itemList = document.createElement('ul');
                for (const item of fruits[f]) {
                    let li = document.createElement('li');
                    li.appendChild(document.createTextNode(item));
                    itemList.appendChild(li);
                }
                li.appendChild(itemList);
            }
            fruitList.appendChild(li);
        }
        document.getElementById('fruits').appendChild(fruitList);
    }

### "use strict"; - what is strict mode?

Strict mode

- Eliminates some JavaScript silent errors by changing them to throw errors.
- Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
- Prohibits some syntax likely to be defined in future versions of ECMAScript.