HomeWork/js/07/DZ_Objects.txt

Literals
const cat = 
{
    "head": 
    {
		"name": "cat's head",
		"ears": [{"name":"ear", "attrs":{"position":"left"}}, {"name":"ear", "attrs":{"position":"right"}}],
		"eyes": [{"name":"eye", "attrs":{"position":"left"}}, {"name":"eye", "attrs":{"position":"right"}}],
		"mouth": "cat's"
	},
	"body": 
    {
        "name": "body",
		"paws": 
            [
                {"name":"paw", "attrs":{"position":"left", "placement": "front"}}, 
                {"name":"paw", "attrs":{"position":"right", "placement": "front"}},
                {"name":"paw", "attrs":{"position":"left", "placement": "rear"}},
                {"name":"paw", "attrs":{"position":"right", "placement": "rear"}},
            ],
		"tail": "cat's tail"
	}
}
Literals expand
cat[prompt("Enter property name")]=prompt("Enter property value");
cat[prompt("Enter property name")]=prompt("Enter property value");
Literals copy
не понял задания

html = 
	{
	  "tagName": "body",
	  "children": [
		{
		  "tagname": "div",
		  "children": [
			{
			  "tagName": "span",
			  "children": [
				"Enter a data please:"
			  ],
			  
			},
			{
			  "tagName": "br"
			},
			{
			  "tagName": "input",
			  "attrs": {
				"type": "text",
				"id": "name"
			  }
			},
			{
			  "tagName": "input",
			  "attrs": {
				"type": "text",
				"id": "surname"
			  }
			}
		  ]
		},
		{
		  "tagName": "div",
		  "children": [
			{
			  "tagName": "button",
			  "attrs": {
				"id": "ok"
			  },
			  "children": [
				"OK"
			  ]
			},
			{
			  "tagName": "button",
			  "attrs": {
				"id": "cancel"
			  },
			  "children": [
				"Cancel"
			  ]
			}
		  ]
		}
	  ]
	}


Html tree
html.children[1].children[1].children[0]
'Cancel'
html.children[0].children[3].attrs.id
'surname'

Parent
html.children[0].parent=html
html.children[1].parent=html
html.children[0].children[0].parent=html.children[0]
html.children[0].children[1].parent=html.children[0]
html.children[0].children[2].parent=html.children[0]
html.children[0].children[3].parent=html.children[0]
html.children[0].children[2].attrs.parent=html.children[0].children[2]
html.children[0].children[3].attrs.parent=html.children[0].children[3]
html.children[1].children[0].parent=html.children[1]
html.children[1].children[1].parent=html.children[1]
html.children[1].children[0].attrs.parent=html.children[1].children[0]
html.children[1].children[1].attrs.parent=html.children[1].children[1]
destruct array
[odd1, even1, odd2, even2, odd3, ...letters] = arr
destruct string
[number, [s1, s2, s3]] = arr
destruct 2
let {children: [{name: name1}, {name: name2}]} = obj
destruct 3
let {0: a, 1: b, length}=arr
Change OK
html.children[1].children[0].attrs.test = prompt("enter attribute value")
html.children[1].children[0].attrs[prompt("enter attribute name")] = prompt("enter attribute value")
Destructure
const {children: [{children: [{children}]}]}=html
Destruct array
let {0: odd1, 2: odd2, 4: odd3, 1: even1, 3: even2, ...letters} = arr
Destruct string
let {0: number, 1: {0: s1, 1: s2, 2: s3}} = arr
destruct 2
let {children: [{name: name1}, {name: name2}]} = obj //не вижу разницы в определении по сравнению с аналогичным выше
Destruct 3
let {0: a, 1: b, length}=arr //не вижу разницы в определении по сравнению с аналогичным выше
Form
obj = {
      "Name":"chevrolet chevelle malibu",
      "Cylinders":8,
      "Displacement":307,
      "Horsepower":130,
      "Weight_in_lbs":3504,
      "Origin":"USA",
      "in_production": false
}
const typesMap = {'boolean':'checkbox', 'number':'number', 'string':'text'};
let str="<form>\n"
for (var name in obj){
    value = obj[name];
    type = typeof value;
    htmlType = typesMap[type];
    if(htmlType=='text' && !isNaN(+value))
        htmlType = typesMap['number']
    str += `   <label>${name}: <input type="${htmlType}" value="${obj[name]}" /></label>\n`;
}
 str+="<form>"
document.write(str)
alert(str)
Table //Эту уже не успеваю писать for-ы - решил в 4 строчки. попробуй посмотреть, завтра объясню
var arr = [
   {
      "Name":"chevrolet chevelle malibu",
      "Cylinders":8,
      "Displacement":307,
      "Horsepower":130,
      "Weight_in_lbs":3504,
      "Origin":"USA"
   },
   {
      "Name":"buick skylark 320",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":165,
      "Weight_in_lbs":3693,
      "Acceleration":11.5,
      "Year":"1970-01-01",
   },
   {
      "Miles_per_Gallon":18,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":3436,
      "Year":"1970-01-01",
      "Origin":"USA"
   },
   {
      "Name":"amc rebel sst",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":150,
      "Year":"1970-01-01",
      "Origin":"USA"
   },
]
names = Object.entries(arr.reduce((prev, next) => {return {...prev, ...next};} )).map(entry => entry[0]);
str = "<tr>"+names.map(name => `<td>${name}<td>`).join('')+"</tr>";
str += `<table>${arr.map(obj => `<tr>${names.map(name => `<td>${obj[name]||"-"}</td>`).join('')}</tr>`).join('')}</table>`
document.write(str)