Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Using a name/value object

`{"seasons" : ['Spring','Summer','Fall','Winter']}`

Example 8.13 - Example 8.13 | <div id="seasonslist2"><p><button onclick="makeSeasonsList(); return false;" type="submit">Click to append list of seasons</button></p></div>function makeSeasonsList() { ul_node = document.createElement("ul"); var mydata= {"seasons":['Spring','Summer','Fall','Winter']} ; var seasons = mydata.seasons; for (i in mydata.seasons) { var mytext = i + " " + seasons[i]; var text_node = document.createTextNode(mytext); var li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }; var container = document.getElementById("seasonslist2"); container.appendChild(ul_node); }

- Markup
- Script

     <div id="seasonslist2"><p><button onclick="makeSeasonsList(); return false;" type="submit">Click to append list of seasons</button></p>
    </div>

In `script` element within `head` element (`<script type="text/javascript">`):

    function makeSeasonsList() {
      ul_node = document.createElement("ul");
      var mydata= {"seasons":['Spring','Summer','Fall','Winter']}
    ;
      var seasons = mydata.seasons;
        for (i in mydata.seasons) {
          var mytext = i + " " + seasons[i];
          var text_node = document.createTextNode(mytext);
          var li_node = document.createElement("li");
          li_node.appendChild(text_node);
          ul_node.appendChild(li_node);
        };
        var container = document.getElementById("seasonslist2");
        container.appendChild(ul_node);
    }

Copyright © David Heitmeyer