Fetch data from http in js using fetch

Question

• I am writing a basic JS function in Microsoft 365 Excel add-in generated using yeoman generator which I just want to fetch some data from a url, while fetching from https it is working fine.
• But while doing the same with http I get an error saying TypeError: Failed to fetch. Now, I understand that I can't fetch from a http link but is there a way around.
• Have included <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> in the html file.
• Code

// Fetch json value
      console.log(`Fetching`);
      var url = "http://1<ip>:<port>/fetch_api";
      //var url = "https://api.publicapis.org/entries";
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          accept: 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error(`Error! status: ${response.status}`);
      }

      const result = await response.json();
      console.log(result);

Answer 1

Firstly you made mistype in headers dictionary headers: { 'Content-Type': 'application/json' } Then rememeber that this function have to be asynch.

Answer 2

no need to write that much code to get requests using fetch. get request is the default method. you can write just fetch(URL). for another type of requests you should write method, headers, body, etc.

just write this function and invoke it.

async function getData () {
const URL = 'your_url'
let response = await fetch(URL)
let data = await response.json()
console.log(data)
}

I am using an async await for fetching data. for any type of promise request you should use async await, this will help you to handle promises.

Answer 3

    fetch('...')
        .then(res => res.json())
        .then(data => {
         const table = document.querySelector('table '); 
         const sortedData = data.slice(0, 5).sort((a, b) => b.id - a.id);
            
         sortedData.forEach(user => {
                
         const username = user.username === "Bret" ? "BBBBB" : user.username;
    
                const markup = `
                    <tr> 
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${username}</td> <!-- Koristi promijenjeno korisničko ime -->
                        <td>${user.email}</td>
                        <td>${user.address.street}</td>
                        
                    </tr>
                `;



table.insertAdjacentHTML('beforeend', markup);});
        });