Skip to content
Open

Develop #1758

Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
pull_request:
branches: [ master ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm start & sleep 5 && npm test
- name: Upload tests report(cypress mochaawesome merged HTML report)
if: ${{ always() }}
uses: actions/upload-artifact@v2
with:
name: report
path: reports
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Tree from object
Write a function `createTree(element, data)` that creates a nested list of `ul/li` from an object.
Use keys as list items.
Write a function `createTree(element, data)` that creates a nested list of `ul/li` from an object.
Use keys as list items.

`element` - is a DOM element

Expand All @@ -11,7 +11,7 @@ Use keys as list items.
![screenshot of the tree](example/object-tree.png)

1. Replace `<your_account>` with your GitHub username in the link
- [DEMO LINK](https://<your_account>.github.io/js_tree-from-object-DOM/)
- [DEMO LINK](https://PAVLO111.github.io/js_tree-from-object-DOM/)
2. Follow [this instructions](https://github.com/mate-academy/js_task-DOM-guideline)
- Run `npm run test` command to test your code;
- Run `npm run test:only -- -n` to run fast test ignoring linter;
Expand Down
21 changes: 20 additions & 1 deletion src/scripts/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,26 @@
const tree = document.querySelector('#tree');

function createTree(element, data) {
// WRITE YOUR CODE HERE
element = document.createElement('ul');

Check failure on line 24 in src/scripts/main.js

View workflow job for this annotation

GitHub Actions / build (20.x)

Assignment to function parameter 'element'
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 24 overwrites the element parameter. The parameter should be used as the container, not replaced. Remove this line - you should create the ul element but append it to the passed element parameter instead.


for (const key in data) {
const firstList = document.createElement('li');

firstList.textContent = key;

element.append(firstList);
document.body.append(element);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 31-32 appends the created ul to document.body instead of the element parameter. The ul should be appended to the passed element (container), not document.body. Also, the ul should only be appended once, outside the loop, after all li elements are added.


const testLength = Object.keys(data[key]).length;

if (testLength !== 0) {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The recursive call passes null instead of properly using the element parameter. The function should be designed so recursive calls work with their respective parent elements.

const next = createTree(firstList, data[key]);

firstList.append(next);
}
}

return element;
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The final tree is never appended to the tree element. Consider structuring the function so the initial call properly builds and appends to the element parameter.

createTree(tree, food);
Loading