//3 persons
let a = {
    'Name': 'Sergei',
    'surname': 'Levshnia',
    'fathername': 'Sergeevich'
}
console.log(a['Name'], a.surname)

let b = {
    'Name': 'Thomas',
    surname: 'Anderson'
}
console.log(b.Name, b.surname)

let c = {
    Name: 'Sylvester',
    surname: 'Stallone'
}
console.log(c['Name'], c['surname'])

//different fields
a.age = 20
b.nickname = 'Neo'
c.movies = ['Rocky', 'Rambo: First Blood', 'Cobra', 'Over the Top']
console.log(a, b, c)

//fields Check
function fieldCheck(obj, string) {
    if(string in obj) {
        alert(obj[string])
    }
}
// console.log(fieldCheck(a, 'age'))
// console.log(fieldCheck(b, 'awoken'))
// console.log(fieldCheck(c, 'movies'))

//array of persons
let persons = []
persons.push(a, b, c)
persons[persons.length] = {
    Name: 'Billy',
    surname: 'Joebob'
}

//loop of persons
console.log('------------------------')
console.log('loop of persons:')
for(i in persons) {
    console.log(persons[i])
}

//loop of name and surname
console.log('------------------------')
console.log('loop of name and surname:')
for(i in persons) {
    console.log(persons[i].Name, persons[i].surname)
}

//loop of loop of values
console.log('------------------------')
console.log('loop of loop of values:')
for(let i in persons) {
    for(let j in persons[i]) {
        console.log(persons[i][j])
    }
    console.log('!-----------------------')
}

//fullName
for(let i in persons) {
    persons[i].fullName = `${persons[i].surname} ${persons[i].Name}` + (persons[i].fathername? ` ${persons[i].fathername}` : '')
}

//serialize
let serialize = JSON.stringify(persons)
console.log(serialize)

//deserialize 
persons.push(JSON.parse(serialize)[0])
console.log(persons)

//HTML
let str = "<table border='1'>"
for (let i = 0; i < persons.length; i++) {
    str += `<tr><td>${persons[i].Name}</td><td>${persons[i].surname}</td></tr>`
}
str += "</table>"
document.write(str)

//Html optional fields
let htmlOptional = '<h2>HTML optional fields</h2><table border="1">'
let tableHeaders = Object.keys(persons[0])

htmlOptional += '<tr style="background-color: black; color: white;">'
for(let i = 0; i < tableHeaders.length; i++) {
    for(let j in persons[i]) {
        if(!tableHeaders.includes(j)) {
            tableHeaders.push(j)
        }
    }
    htmlOptional += `<th>${tableHeaders[i]}</th>`
}
htmlOptional += '</tr>'

for(let i = 0; i < persons.length; i++) {
    //HTML tr color
    htmlOptional += i % 2 === 0? '<tr style="background-color: firebrick; color: white">' : '<tr>'
    //HTML th optional
    for(let cols = 0; cols < tableHeaders.length; cols++) {
            htmlOptional += persons[i][tableHeaders[cols]]? `<td style="text-align:center">${persons[i][tableHeaders[cols]]}</td>` :
                                                            `<td style="text-align:center; color: black;">X</td>`
    }
    htmlOptional += '</tr>'
}
htmlOptional += '</table>'
document.write(htmlOptional)