https://github.com/smelukov/loftschool-example i am currently working on my project in this environment.
I have created a friends.json file in the main folder.
friends.json
{
"name": "John",
"lastName": "Doe",
"value": "5.24"
},
{
"name": "Jane",
"lastName": "Smith",
"value": "6.00"
},
{
"name": "Alice",
"lastName": "Johnson",
"value": "4.54"
}
]
index.hbs
<div id="prev-results"></div>
<button id="loadButton">Load Results</button>
index.js
const loadButton = document.querySelector("#loadButton");
const result = document.querySelector('#prev-results');
loadButton.addEventListener('click', () => {
fetch('friends.json')
.then(response => {
if (response.status >= 400){
return Promise.reject();
}
return response.json();
})
.then(friends => {
result.innerHTML = '';
for (let friend of friends) {
const friendNode = createFriendNode(friend);
result.appendChild(friendNode);
}
})
.catch(() => console.error('Something went wrong'));
});
function createFriendNode(friend) {
const div = document.createElement('div');
div.classList.add('friend');
div.textContent = `${friend.name} ${friend.lastName}`;
const result = document.createElement("a");
result.textContent = `${friend.value}`;
result.classList.add("result");
const label = document.createElement("a");
label.classList.add("result-label")
label.textContent = "mL/min/1.73m²";
div.appendChild(result);
div.appendChild(label);
return div;
}
Now that I can retrieve objects from friends.json and display them on the webpage, how can I programmatically modify the contents of friends.json using JavaScript?