homework/HW5 Objects, in, JSON/script.js

// Task1 3 persons
//
// const a = {
//     name: "Lena",
//     surname: "Ivanova",
// }
//
// const b = {
//     name: "Kate",
//     surname: "Smit",
// }
//
// const c = {
//     name: "Bob",
//     surname: "Petrov",
// }
//
// // Task2 different fields
//
// a.age = 18;
// a.fathername = "Makalester";
//
// b.sex = "femel";
// b.age = "25";
//
// c.fathername = "Ivanovich"
// c.sex = "mele";



// Task3 Fields check

// if(typeof a.age){
//     alert(a.age)
// }

// function check(obj, prop){

//     if(prop in obj){
//         alert(obj[prop]);
//     }

// }
// check(c, "sex");



// Task4 array of persons
//
// const persons = [a, b, c, {name: "Pavel", surname: "Pavlov",}];
//
// // Task5 loop of persons
//
// for (let i = 0; i < persons.length; i++) {
//     console.log(persons[i]);
// }
//
// // Task6 loop of name and surname
//
// for (let i = 0; i < persons.length; i++) {
//     console.log(persons[i].name, persons[i].surname);
// }



// Task7 loop of loop of value

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



// Task8 fullName

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

// }
// fullName(persons);
// console.log(persons)



// Task9 Serialize

// JSON
// `{"persons" : [
//     {"name": "Lena", "surname": "Ivanova", "age": "18", "fathername": "Makalester", "fullName": "Lena Ivanova Makalester"},
//     {"name": "Kat", "surname": "Smit", "sex": "femel", "age": "25", "fullName": "Kate Smit"},
//     {"name": "Bob", "surname": "Petrov", "fathername": "Ivanovich", "sex": "mele", "fullName": "Bob Petrov Ivanovich"},
//     {"name": "Pavel", "surname": "Pavlov", "fullName": "Pavel Pavlov "}
// ]}`



// Task10 deserialize

// const json = `{"persons" : [
//         {"name": "Lena", "surname": "Ivanova", "age": "18", "fathername": "Makalester", "fullName": "Lena Ivanova Makalester"},
//         {"name": "Kat", "surname": "Smit", "sex": "femel", "age": "25", "fullName": "Kate Smit"},
//         {"name": "Bob", "surname": "Petrov", "fathername": "Ivanovich", "sex": "mele", "fullName": "Bob Petrov Ivanovich"},
//         {"name": "Pavel", "surname": "Pavlov", "fullName": "Pavel Pavlov "}
//     ]}`;
// persons.push(JSON.parse(json).persons[0]);
// console.log(persons)

// // Task11 HTML
// const json = `{"persons" : [
//         {"name": "Lena", "surname": "Ivanova", "age": "18", "fathername": "Makalester", "fullName": "Lena Ivanova Makalester"},
//         {"name": "Kat", "surname": "Smit", "sex": "femel", "age": "25", "fullName": "Kate Smit"},
//         {"name": "Bob", "surname": "Petrov", "fathername": "Ivanovich", "sex": "mele", "fullName": "Bob Petrov Ivanovich"},
//         {"name": "Pavel", "surname": "Pavlov", "fullName": "Pavel Pavlov "}
//     ]}`;
// const persons = JSON.parse(json).persons;
//
// let str = "<table border='1' style='border-collapse: collapse'>"
// 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)

// Task12 HTML optional fields
// +
// Task 13
// +
// Task 14
// const json = `{"persons" : [
//         {"name": "Lena", "surname": "Ivanova", "age": "18", "fathername": "Makalester", "fullName": "Lena Ivanova Makalester"},
//         {"name": "Kat", "surname": "Smit", "sex": "femel", "age": "25", "fullName": "Kate Smit"},
//         {"name": "Bob", "surname": "Petrov", "fathername": "Ivanovich", "sex": "mele", "fullName": "Bob Petrov Ivanovich"},
//         {"name": "Pavel", "surname": "Pavlov", "fullName": "Pavel Pavlov "}
//     ]}`;
// const persons = JSON.parse(json).persons;
// const headCaption = {
//     name: 'Name',
//     surname: 'Surname',
//     fathername: 'Fathername',
//     fullName: 'Full name',
//     age: 'Age',
//     sex: 'Sex',
// }
//
//
//
// let str1 = "<table border='1'  style=' border-collapse: collapse'>";
// str1 +=`<tr>`;
//
// for (let key in headCaption){
//     str1+=`<th style="background-color: aquamarine; padding: 3px; text-align: center">${headCaption[key]}</th>`
// }
// str1 +=`</tr>`;
// str1 +=`<tbody>`;
//
// for (let i = 0; i < persons.length; i++) {
//     str1 += `<tr style="background-color: ${i%2 ? 'red' : ""}">`;
//     for (let caption in headCaption){
//         str1+=`<td style="padding: 10px; text-align: center;">
//         ${persons[i][caption] ? persons[i][caption] : "-"}
//         </td>`
//     }
//
//     str1 += `</tr>`;
// }
// str1 +=`</tbody>`;
// str1 += `</table>`;
//
// document.write(str1);

// Blue belt task

const someTree = {
    tagName: "table", //html tag
    subTags: [ //вложенные тэги
        {
            tagName: "tr",
            subTags: [
                {
                    tagName: "td",
                    text: "some text",
                },
                {
                    tagName: "td",
                    text: "some text 2",
                },

            ]
        }
    ],
    attrs:
        {
            border: 1,
        },
};
console.log(Object.keys(someTree.attrs)[0])

function createHtml(objTree) {
    let domStructure = '';
    domStructure += `<${objTree.tagName} ${Object.keys(objTree.attrs)[0]} : ${Object.values(objTree.attrs)[0]}>`;

    for (let i = 0; i < objTree.subTags.length; i++) {
        domStructure += `<${objTree.subTags[i].tagName}>`

        for (let j = 0; j < objTree.subTags[i].subTags.length; j++) {
            domStructure += `<${objTree.subTags[i].subTags[j].tagName}>`;
            domStructure += objTree.subTags[i].subTags[j].text;
            domStructure += `</${objTree.subTags[i].subTags[j].tagName}>`;
        }
        domStructure += `</${objTree.subTags[0].tagName}>`
    }
    domStructure += `</${objTree.tagName}>`
    document.write(domStructure);
}

createHtml(someTree);

// Task blue belt destruct array

let arr = [1, 2, 3, 4, 5, "a", "b", "c"];
const [odd1, even1, odd2, even2, odd3, ...rest] = arr;

//Task blue belt destruct string

let arr1 = [1, "abc"];
const [number, [s1,s2,s3]] = arr1;
console.log(number , s3);

// Task blue belt destruct2

const obj = {name: 'Ivan',
    surname: 'Petrov',
    children: [{name: 'Maria'}, {name: 'Nikolay'}]}

const {children: [{name: name1}, {name: name2}]}=obj;
console.log(name1);
console.log(name2);

// Task blue belt destruct3
let arr2 = [1,2,3,4, 5,6,7,10];

const [a,b, ...c] = arr2;
const [ , , length] =[ a,b, c.length]
console.log( a, b, length);