In my example below i try to get a nested fileTree from my github repo.
But it will not be nested.
Can anybody explain me why the nested ul stands alone and the li contents are not in there?
<?php header('Access-Control-Allow-Origin: *'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1, initial-scale=1.0">
<title>GetGit</title>
</head>
<style>
ul {
margin: 0;
padding-left: 1em;
}
li {
list-style: none;
font-size: .9em;
}
</style>
<body>
</body>
<script type="module">
const repo = 'KoljaL/picoDocs2';
const authKey = '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';
import {
Octokit
} from "https://cdn.pika.dev/@octokit/core";
let octokit = new Octokit({
auth: authKey
});
let htmlString = "";
octokit.request(`GET /repos/${repo}/git/refs`, {
owner: "octokit",
repo: "core.js"
})
.then(data => {
return data.data[0].object.sha;
})
.then(sha => {
getTree(sha)
})
function getTree(sha) {
octokit.request(`GET /repos/${repo}/git/trees/${sha}`)
.then(
data => {
return data.data.tree;
})
.then(
data => {
for (let file of data) {
console.log(file)
if (file.type === "blob") {
htmlString += `<li><a href="${file.url}">${file.path}</a></li>`;
} else if (file.type === "tree") {
htmlString += `<li>${file.path}`;
htmlString += '<ul>';
getTree(file.sha)
htmlString += '</ul></li>';
}
}
document.getElementsByTagName('body')[0].innerHTML = htmlString;
}
)
}
</script>
</html>Second issue: Why is there no content, if you click on a fileLink?