Javascript works in browser but not in stackblitz

[robertkendrick]

This works from browser but does not work in stackblitz

// Import stylesheets
//import './style.css';

// Write Javascript code!
const appDiv = document.getElementById('app');
appDiv.innerHTML = <h1>JS stackblitz Starter</h1>;

async function getDb() {
const res = await fetch('http://bobk.co.uk/simplerest/index.php/user/list');
console.log(res);
const data = await res.json();
console.log(data);
return data;
}

const rsDiv = document.getElementById('rs');
rsDiv.innerHTML = another div;
console.log(rsDiv);

const myData = getDb();
// console.log(myData);
// console.dir(myData);

myData.then((stuff) => {
console.log('mydata-stuff', stuff);
stuff.forEach((item) => {
console.log(item);
console.log(rsDiv);
// rsDiv.innerText = 'where is it';
rsDiv.innerHTML += item.username;
});
})
.catch( err => {
console.log(err);
console.log('Network failed')
});
//console.log(data);

console.log('Hello!');

[fvsch]

Hi @robertkendrick. Do you have a more complete examples that we could test?

This example only shows some JavaScript, the corresponding HTML page is missing, and you have not described what the expected result from this code is.

Could you share a StackBlitz project with your code, and describe what result you expect?

[robertkendrick]

web-platform-ebbh96.zip

Project zip file attached.

Expect console.logs of data received from the fetch api. Not getting any console.logs of data.

[robertkendrick]

FOUND MY PROBLEM -- so closing the issue.

   Mixed Content: The page at 'https://stackblitz.com/' was loaded over HTTPS, but requested an insecure resource 'http://bobk.co.uk/simplerest/index.php/user/list'. This request has been blocked; the content must be served over HTTPS.

(anonymous) @ script.js:27
preview-d0bbfde89eb2a.js:2 <div id=​"rs">​another div​​
preview-d0bbfde89eb2a.js:2 Hello!
preview-d0bbfde89eb2a.js:2 raw fetch2: TypeError: Failed to fetch
at script.js:27:1
The FetchEvent for "https://bobk.co.uk/simplerest/index.php/user/list" resulted in a network error response: an object that was not a Response was passed to respondWith().
Promise.then (async)
(anonymous) @ workbox-routing.prod.js:1
script.js:7