jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-02-28 12:54:48 +03:00
parent 4272b7bb13
commit 508969c13f
168 changed files with 340 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

57
2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html Executable file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script>
let data = {
"Fish": {
"trout": {},
"salmon": {}
},
"Tree": {
"Huge": {
"sequoia": {},
"oak": {}
},
"Flowering": {
"redbud": {},
"magnolia": {}
}
}
};
function createTree(container, obj) {
container.append(createTreeDom(obj));
}
function createTreeDom(obj) {
// if there's no children, then the call returns undefined
// and the <ul> won't be created
if (!Object.keys(obj).length) return;
let ul = document.createElement('ul');
for (let key in obj) {
let li = document.createElement('li');
li.innerHTML = key;
let childrenUl = createTreeDom(obj[key]);
if (childrenUl) {
li.append(childrenUl);
}
ul.append(li);
}
return ul;
}
let container = document.getElementById('container');
createTree(container, data);
</script>
</body>
</html>

45
2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script>
let data = {
"Fish": {
"trout": {},
"salmon": {}
},
"Tree": {
"Huge": {
"sequoia": {},
"oak": {}
},
"Flowering": {
"redbud": {},
"magnolia": {}
}
}
};
function createTree(container, obj) {
container.innerHTML = createTreeText(obj);
}
function createTreeText(obj) { // отдельная рекурсивная функция
let li = '';
for (let key in obj) {
li += '<li>' + key + createTreeText(obj[key]) + '</li>';
}
if (li) {
let ul = '<ul>' + li + '</ul>'
}
return ul || '';
}
let container = document.getElementById('container');
createTree(container, data);
</script>
</body>
</html>

4
2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md Normal file
View file

@ -0,0 +1,4 @@
The easiest way to walk the object is to use recursion.
1. [The solution with innerHTML](sandbox:innerhtml).
2. [The solution with DOM](sandbox:build-tree-dom).

68
2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html Executable file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="tree"></div>
<!-- The result should be:
<div id="tree">
<ul>
<li>Fish
<ul>
<li>trout</li>
<li>salmon</li>
</ul>
</li>
<li>Trees
<ul>
<li>Huge
<ul>
<li>sequoia</li>
<li>oak</li>
</ul>
</li>
<li>Flowering
<ul>
<li>redbud</li>
<li>magnolia</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
-->
<script>
let data = {
"Fish": {
"trout": {},
"salmon": {}
},
"Tree": {
"Huge": {
"sequoia": {},
"oak": {}
},
"Flowering": {
"redbud": {},
"magnolia": {}
}
}
};
function createTree(container, data) {
/* your code */
}
createTree(document.getElementById('tree'), data);
</script>
</body>
</html>

51
2-ui/1-document/07-modifying-document/7-create-object-tree/task.md Normal file
View file

@ -0,0 +1,51 @@
importance: 5
---
# Create a tree from the object
Write a function `createTree` that creates a nested `ul/li` list from the nested object.
For instance:
```js
let data = {
"Fish": {
"trout": {},
"salmon": {}
},
"Tree": {
"Huge": {
"sequoia": {},
"oak": {}
},
"Flowering": {
"redbud": {},
"magnolia": {}
}
}
};
```
The syntax:
```js
let container = document.getElementById('container');
*!*
createTree(container, data); // creates the tree in the container
*/!*
```
The result (tree) should look like this:
[iframe border=1 src="build-tree-dom"]
Choose one of two ways of solving this task:
1. Create the HTML for the tree and then assign to `container.innerHTML`.
2. Create tree nodes and append with DOM methods.
Would be great if you could do both.
P.S. The tree should not have "extra" elements like empty `<ul></ul>` for the leaves.