Hi I am trying to fetch a local JSON file I used localhost for this but the problem I am having is when I fetch it using:

const endpoint = "http://127.0.0.1:5500/appendixA.json"

const fetchedItems = fetch(endpoint)
    .then(res => res.json())
    .then(result => result.appendix_a)
    .catch(e => console.log("error: ", e))

or using async await

const fetchFunc = async () => {
     let response = await fetch(endpoint);
     let jsonResponse = await response.json()
     return jsonResponse.appendix_a;
}

So when I console.log either of them console.log(fetchedItems) console.log(fetchFunc()) I am not getting result as a variable array ie [ //results ] But instead I am getting just a [Promise]

Here is a sample off the JSON file

    {
        "appendix_a": [
            {
                "id": 1,
                "stakeholder": "Commercial Director",
                "user_story": "As a user I need to be able to insert my name into the form"
            },
            {
                "id": 2,
                "stakeholder": "Commercial Director",
                "user_story": "As a user I need to be able to insert my email into the form"
            }
        ]
    }

Why is this happening as I have done res.json() on the initial .then call as well as I have done await res.json() inside the async function

Please clarify for me that.

As I plan to insert the fetch data into a ul element like this which obviously wont work because of the Promise

const ul = document.querySelector('ul');
let li = document.createElement('li');

fetchedItems.map(pa => {
        li.innerHTML = `
<span>${pa.id}</span> 
<p>${pa.stakeholder}></p> 
<p>${pa.user_story}</p> `
        return ul.appendChild(li);            
});