Homework/05/script.js

// ------------------------------3 persons----------------------------------------------

// let a = {
//     name: "Victor",
//     surname: "Basharov",
// }

// let b = {
//     name: "Dmitriy",
//     surname: "Ivanov",
// }

// let c = {
//     name: "John",
//     surname: "Doe",
// }

// ------------------------------different fields----------------------------------------------

let a = {
    name: "Victor",
    surname: "Petrov",
    age: 35
}

let b = {
    name: "Dmitriy",
    surname: "Ivanov",
    fathername: "Alexandrovich"
}

let c = {
    name: "John",
    surname: "Doe",
    sex: "Male"
}

// ------------------------------fields check----------------------------------------------

// for(let key1 in a) {
//     if(key1 === "age") {
//         alert(key1 + ': ' + a[key1]);
//     }
// }

// for(let key2 in b) {
//     if(key2 === "fathername") {
//         alert(key2 + ': ' + b[key2]);
//     }
// }

// for(let key3 in c) {
//     if(key3 === "sex") {
//         alert(key3 + ': ' + c[key3]);
//     }
// }

// ------------------------------array of persons----------------------------------------------

let persons = [a, b, c];

let newPerson = {
    name: "Alex",
    surname: "Man",
    isSportsman: true
};

persons[3] = newPerson;

// ------------------------------loop of persons----------------------------------------------

// for(let i in persons) {
//     console.log(persons[i])
// }

// ------------------------------loop of name and surname----------------------------------------------

// for(let i=0; i<persons.length; i++) {
//     for(let key in persons[i]) {
//         if(key === "name" || key === "surname") {
//             console.log(persons[i][key]);
//         }
//     }
// }

// ------------------------------loop of loop of values----------------------------------------------

// for(let i=0; i<persons.length; i++) {
//         for(let key in persons[i]) {
//                 console.log(persons[i][key]);
//         }
//     }

// ------------------------------fullName----------------------------------------------

// for (let i = 0; i < persons.length; i++) {
//     persons[i].fullName = `${persons[i].name} ${persons[i].surname}` + (persons[i].fathername && (' ' + persons[i].fathername) || '');
// }

// for (let i in persons) {
//     console.log(persons[i].fullName)
// }

// ------------------------------serialize----------------------------------------------

// let jsonPersons = JSON.stringify(persons);

// console.log(jsonPersons);

// ------------------------------deserialize----------------------------------------------

// let jsonString = JSON.parse(persons)


let jsonObject = JSON.parse(`{"name":"John","surname":"Doe","fathername":"Nathan"}`);

persons[4] = jsonObject;

console.log(persons);

// ------------------------------HTML----------------------------------------------

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

console.log(str);
document.write(str);

// ------------------------------HTML optional fields----------------------------------------------

let str2 = "<table border='1'>";

str2 += "<tr> <th>#</th> <th>Name</th> <th>Surname</th> <th>Aditional field</th> </tr>";
// str += `<th>#</th>`;
// str += `<th>Name</th>`;
// str += `<th>Surname</th>`;
// str += `<th>Aditional field</th>`;
// str += `</tr>`;

for (let i = 0; i < persons.length; i++) {
    str2 += `<tr> <td>${i+1}</td>`;                   // как оно работает без </tr>  ???
    for (let key in persons[i]) {
        str2 += `<td>${persons[i][key]}</td>`;
    }
}
str2 += "</table>"

console.log(str2);
document.write(str2);

// ------------------------------HTML tr color----------------------------------------------

let str3 = "<table border='1'>";

str3 += "<tr> <th>#</th> <th>Name</th> <th>Surname</th> <th>Aditional field</th> </tr>";

for (let i = 0; i < persons.length; i++) { 
    if(i % 2) {
        str3 += `<tr style = "background: yellow"><td>${i+1}</td>`;
    } else {
        str3 += `<tr> <td>${i+1}</td>`;  
    }                
    for (let key in persons[i]) {
        str3 += `<td>${persons[i][key]}</td>`;
    }
}
str3 += "</table>"

console.log(str3);
document.write(str3);

// ------------------------------HTML th optional----------------------------------------------

let str4 = "<table border='1'>";

str4 += "<tr>";

for (let i = 0; i < persons.length; i++) {
    str4 += `<th>${i+1}</th>`;
}
str4 += "</tr>";

for (let i = 0; i < persons.length; i++) { 
    if(i % 2) {
        str4 += `<tr style = "background: yellow"><td>${i+1}</td>`;
    } else {
        str4 += `<tr> <td>${i+1}</td>`;  
    }                
    for (let key in persons[i]) {
        str4 += `<td>${persons[i][key]}</td>`;
    }
}
str4 += "</table>"

console.log(str4);
document.write(str4);