Destructuring Complex Object

Question

Thanks so much for all the help with this answer you guys!! I'm very new to coding in general and you are making it a lot easier to get a grip on things! So far, I've got updated code kind of based on what I saw here (I didn't want to just copy & paste the answer, I wanted to learn everything that was happening with the code). From what I have now, the only thing I'm having trouble with is removing the "undefined" result from the output. I'm assuming this has something to do with an "if" statement inside the "for" loop, but I wasn't sure. Any insights?

 let userList = { "people": [ { firstName: "Fred", lastName: "Smith", dateOfBirth: 1980, spokenLanguages: { native: "English", fluent: "Spanish", intermediate: "Chinese" } }, { firstName: "Monica", lastName: "Taylor", dateOfBirth: 1975, spokenLanguages: { native: "Spanish", fluent: "English", intermediate: "French" } }, { firstName: "Maurice", lastName: "Edelson", dateOfBirth: 1992, spokenLanguages: { native: "English", fluent: "Spanish", } }, { firstName: "Kelly", lastName: "Lang", dateOfBirth: 1982, spokenLanguages: { native: "English", fluent: "German", intermediate: "Dutch" } } ] }; for (var i = 0; i < userList.people.length; i++) { let table = document.getElementById("info"); let newRow = table.insertRow(1); let cell = newRow.insertCell(0); let dobCell = newRow.insertCell(1); let langs = newRow.insertCell(2); let { firstName } = userList.people[i]; let { lastName } = userList.people[i]; let { dateOfBirth } = userList.people[i]; let { spokenLanguages: { native, fluent, intermediate } } = userList.people[i]; cell.innerHTML += firstName + ' ' + lastName + "<br/>"; dobCell.innerHTML += dateOfBirth + "<br/>"; langs.innerHTML += native + ', ' + fluent + ', ' + intermediate + "<br/><br/>"; }

 th { border: 6 px solid blue; border - collapse: collapse; } table { border - collapse: collapse; } td { border: 6 px solid black; border - collapse: collapse;

 <div id="show"> <table id="info"> <tr> <th><strong>First/Last Name</strong></th> <th><strong>Date of Birth</strong></th> <th><strong>Spoken Languages</strong></th> </tr> </table> </div>

Answer 1

intermediate has no value for one of the person on the list. It is by default set to undefined if the property is missing.

You can define a default value as part of the destructuring assignment

let {
       spokenLanguages: {
          native = '',
          fluent = '',
          intermediate = ''
       }
    } = userList.people[i];

There are lots of ways to refactor the code to make it a bit more cleaner.

 let userList = { "people": [ { firstName: "Fred", lastName: "Smith", dateOfBirth: 1980, spokenLanguages: { native: "English", fluent: "Spanish", intermediate: "Chinese" } }, { firstName: "Monica", lastName: "Taylor", dateOfBirth: 1975, spokenLanguages: { native: "Spanish", fluent: "English", intermediate: "French" } }, { firstName: "Maurice", lastName: "Edelson", dateOfBirth: 1992, spokenLanguages: { native: "English", fluent: "Spanish", } }, { firstName: "Kelly", lastName: "Lang", dateOfBirth: 1982, spokenLanguages: { native: "English", fluent: "German", intermediate: "Dutch" } } ] }; for (var i = 0; i < userList.people.length; i++) { let table = document.getElementById("info"); let newRow = table.insertRow(1); let cell = newRow.insertCell(0); let dobCell = newRow.insertCell(1); let langs = newRow.insertCell(2); const { firstName = '', lastName = '', dateOfBirth = '', spokenLanguages: { native = '', fluent = '', intermediate = '' } } = userList.people[i]; cell.textContent = `${firstName} ${lastName}`; dobCell.textContent = dateOfBirth; langs.textContent = `${native}, ${fluent}, ${intermediate}`; }

• As you are already using es6 , you can rely on template literals to make your code more readable.
• For every iteration you are inserting a new row and cell, so you don't really need to use += operator.