API Access HTML/Javascript problem

I have an issue trying to use javascript to get the circulating supply by requesting data from Tzscan API:

HTML code to request the circulating supply:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <h1>There Tezos Circulating : </h1>

  <div id="getapi"></div>

</body>

</html>

Javascript Code to get the data from the API:

<script>

  function createNode(element) {

    return document.createElement(element);

  }



  function append(parent, el) {

    return parent.appendChild(el);

  }



  const ul = document.getElementById('getapi');

  const url = 'http://api6.tzscan.io/v3/supply';

  fetch(url)

    .then((resp) => resp.json())

    .then(function(data) {

      let span = createNode('span');

      span.innerHTML = `${data.circulating_supply/1000000}`;

      append(ul, span);

    })

    .catch(function(error) {

      console.log(error);

    }); 

 </script>

The problem is that somehow it works when I create a HTML file locally but not online.

edited Mar 25 at 11:29

luchonacho

532216

asked Mar 24 at 21:49

Lexxor

1006

New contributor

it'll help to also include the errors you are getting. I know we could probably look at your codepen but for the sake of the question, it's best include the errors in the question.

– Frank
Mar 25 at 3:20

add a comment |

I have an issue trying to use javascript to get the circulating supply by requesting data from Tzscan API:

HTML code to request the circulating supply:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <h1>There Tezos Circulating : </h1>

  <div id="getapi"></div>

</body>

</html>

Javascript Code to get the data from the API:

<script>

  function createNode(element) {

    return document.createElement(element);

  }



  function append(parent, el) {

    return parent.appendChild(el);

  }



  const ul = document.getElementById('getapi');

  const url = 'http://api6.tzscan.io/v3/supply';

  fetch(url)

    .then((resp) => resp.json())

    .then(function(data) {

      let span = createNode('span');

      span.innerHTML = `${data.circulating_supply/1000000}`;

      append(ul, span);

    })

    .catch(function(error) {

      console.log(error);

    }); 

 </script>

The problem is that somehow it works when I create a HTML file locally but not online.

edited Mar 25 at 11:29

luchonacho

532216

asked Mar 24 at 21:49

Lexxor

1006

New contributor

it'll help to also include the errors you are getting. I know we could probably look at your codepen but for the sake of the question, it's best include the errors in the question.

– Frank
Mar 25 at 3:20

add a comment |

I have an issue trying to use javascript to get the circulating supply by requesting data from Tzscan API:

HTML code to request the circulating supply:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <h1>There Tezos Circulating : </h1>

  <div id="getapi"></div>

</body>

</html>

Javascript Code to get the data from the API:

<script>

  function createNode(element) {

    return document.createElement(element);

  }



  function append(parent, el) {

    return parent.appendChild(el);

  }



  const ul = document.getElementById('getapi');

  const url = 'http://api6.tzscan.io/v3/supply';

  fetch(url)

    .then((resp) => resp.json())

    .then(function(data) {

      let span = createNode('span');

      span.innerHTML = `${data.circulating_supply/1000000}`;

      append(ul, span);

    })

    .catch(function(error) {

      console.log(error);

    }); 

 </script>

The problem is that somehow it works when I create a HTML file locally but not online.

edited Mar 25 at 11:29

luchonacho

532216

asked Mar 24 at 21:49

Lexxor

1006

New contributor

I have an issue trying to use javascript to get the circulating supply by requesting data from Tzscan API:

HTML code to request the circulating supply:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <h1>There Tezos Circulating : </h1>

  <div id="getapi"></div>

</body>

</html>

Javascript Code to get the data from the API:

<script>

  function createNode(element) {

    return document.createElement(element);

  }



  function append(parent, el) {

    return parent.appendChild(el);

  }



  const ul = document.getElementById('getapi');

  const url = 'http://api6.tzscan.io/v3/supply';

  fetch(url)

    .then((resp) => resp.json())

    .then(function(data) {

      let span = createNode('span');

      span.innerHTML = `${data.circulating_supply/1000000}`;

      append(ul, span);

    })

    .catch(function(error) {

      console.log(error);

    }); 

 </script>

The problem is that somehow it works when I create a HTML file locally but not online.

api javascript circulating-supply

edited Mar 25 at 11:29

luchonacho

532216

asked Mar 24 at 21:49

Lexxor

1006

New contributor

edited Mar 25 at 11:29

luchonacho

532216

asked Mar 24 at 21:49

Lexxor

1006

New contributor

edited Mar 25 at 11:29

luchonacho

532216

edited Mar 25 at 11:29

luchonacho

532216

edited Mar 25 at 11:29

luchonacho

532216

asked Mar 24 at 21:49

Lexxor

1006

New contributor

asked Mar 24 at 21:49

Lexxor

1006

asked Mar 24 at 21:49

Lexxor

1006

New contributor

Lexxor is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

it'll help to also include the errors you are getting. I know we could probably look at your codepen but for the sake of the question, it's best include the errors in the question.

– Frank
Mar 25 at 3:20

add a comment |

it'll help to also include the errors you are getting. I know we could probably look at your codepen but for the sake of the question, it's best include the errors in the question.

– Frank
Mar 25 at 3:20

it'll help to also include the errors you are getting. I know we could probably look at your codepen but for the sake of the question, it's best include the errors in the question.

– Frank
Mar 25 at 3:20

add a comment |

1 Answer
1

active

oldest

votes

You've encountered a mixed content error. Requests can't be a mixture of http and https, they need to be all of the same, preferably https. Just change the const url = 'http://api6.tzscan.io/v3/supply'; to be https

const url = 'https://api6.tzscan.io/v3/supply';



fetch(url)

.then(resp => resp.json())

.then(({dls}) => {

    let span = createNode('span');

    span.innerHTML = dls;

    append(ul, span);

})

.catch(console.log);

edited Mar 25 at 1:59

answered Mar 24 at 23:15

Richard Ayotte

25917

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "698"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Lexxor is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2ftezos.stackexchange.com%2fquestions%2f897%2fapi-access-html-javascript-problem%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

const url = 'https://api6.tzscan.io/v3/supply';



fetch(url)

.then(resp => resp.json())

.then(({dls}) => {

    let span = createNode('span');

    span.innerHTML = dls;

    append(ul, span);

})

.catch(console.log);

edited Mar 25 at 1:59

answered Mar 24 at 23:15

Richard Ayotte

25917

add a comment |

const url = 'https://api6.tzscan.io/v3/supply';



fetch(url)

.then(resp => resp.json())

.then(({dls}) => {

    let span = createNode('span');

    span.innerHTML = dls;

    append(ul, span);

})

.catch(console.log);

edited Mar 25 at 1:59

answered Mar 24 at 23:15

Richard Ayotte

25917

add a comment |

const url = 'https://api6.tzscan.io/v3/supply';



fetch(url)

.then(resp => resp.json())

.then(({dls}) => {

    let span = createNode('span');

    span.innerHTML = dls;

    append(ul, span);

})

.catch(console.log);

edited Mar 25 at 1:59

answered Mar 24 at 23:15

Richard Ayotte

25917

const url = 'https://api6.tzscan.io/v3/supply';



fetch(url)

.then(resp => resp.json())

.then(({dls}) => {

    let span = createNode('span');

    span.innerHTML = dls;

    append(ul, span);

})

.catch(console.log);

edited Mar 25 at 1:59

answered Mar 24 at 23:15

Richard Ayotte

25917

edited Mar 25 at 1:59

answered Mar 24 at 23:15

Richard Ayotte

25917

answered Mar 24 at 23:15

Richard Ayotte

25917

answered Mar 24 at 23:15

Richard Ayotte

25917

add a comment |

Lexxor is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Lexxor is a new contributor. Be nice, and check out our Code of Conduct.

Thanks for contributing an answer to Tezos Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Csdrhrt