Count Api return undefinded response-CodePudding

World! I am new to the world of programming, and a friend is teaching me the basics, I would like to surprise him with something made by me, but I find no answer to this problem.

I used an api to make a counter, but when I go to call it, it gives me undefined, and I don't understand why. Could anyone help me?

Actualy i am using bootstrap as IDE.

Thanks for the help

this is my code:

   
   

<script>
const countEl = document.getElementById('count');

updateVisitCount();



function updateVisitCount() {
    
    fetch('https://api.countapi.xyz/update/http://localhost:8080/Freedom/test/?amount=1')
    .then(res => res.json())
    .then(res => {
        countEl.innerHTML = res.value;
        
    })
}
</script>

<div >
   <p>This page was viewed</p>
<h1 id="count">0</h1>
<p>times</p>
   </div>

CodePudding user response：

It is because you are using localhost in your API URL.

So here's the deal. localhost is the address of your OWN computer on your OWN network. You can read about local network addresses, your computer has an IP address like 192.168.x.y within your home network (x is different, but usually is 0,1 or 100, and y is your device number ). To not mess around with that IP address, you write localhost instead and it makes it easier to access whatever you are using on your computer since you don't have to remember those 192.168 bla bla numbers.

Now the problem is that the counter API is a public API, which means that it's a server running somewhere in this world. So when you call it, it does its thing and returns you the last value it sent to you plus 1 ( assuming you called in the past ). From what I see it remembers your address because you pass it to the api in the URL. It has to remember your address otherwise it'll never know who you are.

Well, in your case, you pass localhost to it, which is not a real address, every computer in this world has localhost, therefore the counter API does not understand who you are.

Take this analogy. Imagine the counter API being a guy who lives in country X and his job is to keep track of how many push-ups you did that day. For this guy to remember how many push-ups you did, it asks you to give him your home address so he'll remember you the next time you tell him how many push-ups you managed to do. Now, what you did in your code is basically the following: Instead of saying. I did 20 push-ups. I live on street x, city y, country z, you said I did 20 push-up. I live in my bedroom.. Now, the guy is confused just like the counter api is. He's like "Well, everyone has a bedroom... how are you different?". This is quite a silly analogy but I hope you get the idea.

Now, the solution is to give to this counter API your real address on the internet. Just go to google and type my ip and you'll get the IPv4 address by accessing the first website. That address is your real address - it's like the address you have at your home, but instead it's your local network's address on the all-mighty internet.

Therefore, the API Url will look a little something like this https://api.countapi.xyz/hit/[your_ip_address] and it will return the last value you had plus one.

So change the fetch in the following:

fetch('https://api.countapi.xyz/hit/[your_ip_address]')

I assume you are not familiar with IP addresses, so the IP address that you found on that website on google should look like this - 37.75.83.9, this an IP address I just made up, though it's probably someone's actual address.

Anyway, now your counter should work. Everytime you refresh the page the value should be increased by one. I hope you surprise your friend :)

CodePudding user response：

i think your fetch url is dublicated