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 yesterday

luchonacho

459215

asked 2 days ago

Lexxor

404

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
2 days ago

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 yesterday

luchonacho

459215

asked 2 days ago

Lexxor

404

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
2 days ago

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 yesterday

luchonacho

459215

asked 2 days ago

Lexxor

404

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 yesterday

luchonacho

459215

asked 2 days ago

Lexxor

404

New contributor

edited yesterday

luchonacho

459215

asked 2 days ago

Lexxor

404

New contributor

edited yesterday

luchonacho

459215

edited yesterday

luchonacho

459215

edited yesterday

luchonacho

459215

asked 2 days ago

Lexxor

404

New contributor

asked 2 days ago

Lexxor

404

asked 2 days ago

Lexxor

404

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
2 days ago

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
2 days ago

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
2 days ago

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 2 days ago

answered 2 days ago

Richard Ayotte

23917

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 2 days ago

answered 2 days ago

Richard Ayotte

23917

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 2 days ago

answered 2 days ago

Richard Ayotte

23917

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 2 days ago

answered 2 days ago

Richard Ayotte

23917

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 2 days ago

answered 2 days ago

Richard Ayotte

23917

edited 2 days ago

answered 2 days ago

Richard Ayotte

23917

answered 2 days ago

Richard Ayotte

23917

answered 2 days ago

Richard Ayotte

23917

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

搜尋此網誌

Cfxtrjtrk