Introduction

In this part, we’ll look at the following topics:

  • Arrays as properties of objects.
  • JSON - JavaScript Object Notation.
  • Loading multiple JavaScript files.
  • Creating HTML from objects.

Arrays as properties of objects

We’ve seen that objects can have strings, numbers, Booleans and functions as property values.

Object properties can also hold arrays:

const dogs = { breeds: ["golden retriever", "labrador", "poodle"] };

Scrimba video

JSON

JSON stands for JavaScript Object Notation.

It is used to exchange data and is used by REST APIs to send data between browsers (or apps) and servers.

It looks like an ordinary JavaScript object.

This video looks at how JSON is sent from a server via an API call.

##Loading multiple JavaScript files

You can link to multiple JavaScript files from an HTML page, and variables and functions will be available in the order they are included.

If you load multiple files like this:

<script src="js/script1.js"></script>
<script src="js/script2.js"></script>

Anything declared in script1.js will be available to the code in script2.js.

Creating HTML from objects

The following three videos examine creating HTML from objects.

1. Using a single object to create HTML

The first video looks at creating HTML from a single object’s properties and adding default values for missing properties.

Code from the video.

2. Setting the innerHTML of individual elements

This video looks at setting the innerHTML property of individual DOM elements from a single object.

Code from the video.

3. Creating HTML from an array of objects

In this video, HTML is created by looping through an array of objects.

Code from the video.

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt to answer the questions before checking them against the answers in the answer branch of the repo.

Tags: