Apples List - Generating Content with strings

Data

{
 "apples": ['Macoun', 'Empire',
            'Honey Crisp',
            'Albemarle Pippin',
            'Pink Lady']
}

JavaScript

• innerHTML is used to "get" or "set" the string value.
• Use "+" to concatenate strings in JavaScript
  let fullName = firstName + " " + lastName;

 
 <h1>List of Fruits from Data </h1>
 <div id="fruits">List will go here.
 </div>

<script src="example4.js"> </script>

"use strict";

let fruits = {
  "apples": ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin', 'Pink Lady']
};
window.addEventListener('DOMContentLoaded',function(){
  buildFruitList();
});

function buildFruitList(){
  let fruitList = "<ul>";

  for (const item of fruits["apples"].sort()) {
      let li = "<li>" + item + "</li>";
      fruitList = fruitList + li;
  }
  fruitList = fruitList + "</ul>";
  console.log(fruitList);
  document.getElementById('fruits').innerHTML = fruitList;
}

JavaScript

• for ( item of arrayList ) to iterate.
• innerHTML to set the HTML to a string value (to be parsed into DOM nodes)

"use strict";

let fruits = {
  "apples": ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin', 'Pink Lady']
};
window.addEventListener('DOMContentLoaded',function(){
  buildFruitList();
});

function buildFruitList(){
  let fruitList = "<ul>";

  for (const item of fruits["apples"].sort()) {
      let li = "<li>" + item + "</li>";
      fruitList = fruitList + li;
  }
  fruitList = fruitList + "</ul>";
  console.log(fruitList);
  document.getElementById('fruits').innerHTML = fruitList;
}