Visitor counts not reflecting on my resume page | Cloud Resume Challenge | Page 1

near grail Apr 11, 2023, 5:38 AM

#

<h1>You are visitor:</h1>
<div id="counter">
<script>
fetch('api_gateway_url')
.then(res => res.json())
.then(res => {document.getElementById("counter").innerHTML = res.body.count})
.then(data => console.log(data));
</script>
</div>
</div>
</div>
</div>
</div>
</body>

</html>

I am not sure if this is right channel for this question. I apologize. I included the javascript above in my resume html ( At first, I didn't know where to include the script in my html but I later figured it out) but the counts is not showing on my resume page. I pasted and tested the api gateway url in my web browser, I get a response ({"headers": {"Access-Control-Allow-Origin": "*"}, "statusCode": 200, "body": "26"}). I have been on this for some days. At this juncture, i don't know what to do. Please help!! Thanks.

void mortar Apr 11, 2023, 6:12 PM

#

so when you do res.body.count, it's looking for something like this

{
"headers": {...},
"statusCode": ...,
"body": {count: "somenumber"},
}

#

does that "body" field match up with what you get in the browser?

near grail Apr 11, 2023, 7:52 PM

#

@void mortar do you mean the number that shows up in the browser? Each time i paste api url in the browser i get a body counts response. It does the body counts the way it should. Another question; is the API method GET or POST? i did both. I deleted the API I had and created another one, but I am not still getting a response on my resume page

void mortar Apr 11, 2023, 9:39 PM

#

near grail <@713540291671490580> do you mean the number that shows up in the browser? Each ...

sorry, i meant whether this:

{
"headers": {...},
"statusCode": ...,
"body": {count: "somenumber"},
}

matches up with what you got, which was this:

{
"headers": {...},
"statusCode": 200,
"body": "26",
}

which kinda makes it a bit more obvious that it.. does not! you are actually getting a usable response, you just need to fix something in your javascript code to get it

near grail Apr 11, 2023, 9:59 PM

#

Yes, I believe my response wasn't the problem. I posted the javascript i used, i really don't what to fix because I have everything i could

split shore Apr 12, 2023, 12:13 AM

#

@near grail so, the first thing you need to check is what your API returns, you can use Postman to this; assuming that it is returning it the way it should, you probably need to refactor your JS code to refer to the correct element in the JSON, which is what escalates was getting at

near grail Apr 12, 2023, 1:25 AM

#

Oh i see! I will try it out again. Thank you @split shore

near grail Apr 12, 2023, 9:07 AM

#

def lambda_handler(event, context):
#connect to DynamoDB
dynamodb = boto3.resource("dynamodb")
table_name = "cloud-resume-visitors"
table = dynamodb.Table(table_name)

#get the current visit count
response = table.get_item(Key={"user": 1, "sk": 1})
item = response.get("Item", {})
visit_count = item.get("visit_count", 0)

#increment the visit count
visit_count += 1

#update the visit count in DynamoDB
table.put_item(Item={"user": 1, "sk": 1, "visit_count": visit_count})

#return the updated visit count
return {"headers": {"Access-Control-Allow-Origin": "*"},"statusCode": 200, "body": str(visit_count)} or {"statusCode": 404, "body": "Item not found"}                                                                                                                   .....my lambda function above. And my js is below  :                                                                                                                                                  <h1>You are visitor:</h1>
      <div id="visitor_count">
        <script>
          fetch('https://q5pq433oi5.execute-api.us-east-1.amazonaws.com/dev')
          .then(res => res.json())
          .then(res => {document.getElementById("visitor_count").innerHTML = res.body.count})
          .then(data => console.log(data));                                                                                                  i checked both my lambda function and my js, tweak it but all to no avail. I followed the instructions (I know I am something is missing) from you guys and still read through some similar issues in the channels. I am getting "You are visitor: undefined". I decided to paste my codes, maybe you guys can help me review it to see what i am getting wrong. I am sorry if i keep repeating myself. Thanks.

void mortar Apr 13, 2023, 3:16 PM

#

you're good, dont worry about it

#

so if i had a javascript object like so:

res = {
"greeting": "hello",
"age": "45"
}

how would you access that "hello" value?

near grail Apr 13, 2023, 10:22 PM

#

I am guessing it would be res => {document.getElementById("greeting").innerHTML = age}) ?

void mortar Apr 15, 2023, 9:20 AM

#

err, i meant in just a regular kind of javascript context. try goin to https://runjs.co/ and enter in the following code:

const res = {
"greeting": "hello",
"age": "45"
}

console.log(res);

if you wanted to console log just that "hello" value, how would you alter the code to do that?

RunJS | JavaScript Playground | Run JavaScript and TypeScript Code ...

JavaScript Playground Web App

near grail Apr 17, 2023, 3:40 AM

#

const greeting = "hello"; console.log(greeting); ?

#

Does that make sense @void mortar ?

void mortar Apr 17, 2023, 3:44 AM

#

uhh, it'll print "hello" but its not getting that data from the object lol

#

use that runjs website to run the code i pasted before:

const res = {
"greeting": "hello",
"age": "45"
}

console.log(res);

the only line you'll need to change is that very last console.log line

near grail Apr 17, 2023, 4:07 AM

#

{
"greeting": "hello",
"age": "45"
} when i pasted the code, i got the result above. are the data "hello" and "45"?

void mortar Apr 17, 2023, 4:09 AM

#

technically it is all data, but if you wanted it to print "hello" from your object:

{
  "greeting": "hello", <--- get this value
  "age": "45"
}

#

how would you change that last line?

near grail Apr 17, 2023, 4:14 AM

#

i did: console.log(greeting); and i got 'hello' ?

#

is that what you mean? lol

near grail Apr 17, 2023, 4:43 AM

#

I am getting...... You are visitor: undefined

void mortar Apr 17, 2023, 3:56 PM

#

near grail i did: console.log(greeting); and i got 'hello' ?

err, not quite. i meant something like this:

console.log(res.greeting);

which is how you would access the value associated with "greeting" in that json object. does that make sense?

near grail Apr 17, 2023, 5:47 PM

#

Make sense @void mortar ! i will try that tonight and keep you posted. You are such a great teacher lol. I will keep you posted

near grail Apr 19, 2023, 8:57 AM

#

Thank you so much @void mortar ! It's working fine. I can see the "visits" on my resume. What i did was to literarily edited my lambda function (did some research). I made sure the "body" in my return match my js script.... then(data => document.getElementById("count").innerText = data.Visit_Count). I just added "Visit_Count" which is in the body of my lambda function.

#

Now that i have the visit count reflect on my resume page, is it suppose to reflect on my website yet? just curious to know. Thanks a lot for your supports.

void mortar Apr 19, 2023, 9:10 PM

#

if you can see the amount of visitors on your resume, then all is good! your way is the better way to go about it, because you can easily add more data to the response body if you need to

#

the easier (but worse) way i was initially hinting at was simply changing your javascript code to say this:

(res => {document.getElementById("counter").innerHTML = res.body})

because you already had the response-- it just wasn't being accessed correctly!

near grail Apr 20, 2023, 12:35 AM

#

You are absolutely right @void mortar. I really appreciate the way you throw light in explaining the steps. The js script make sense to me now unlike when i started lol. Getting set to advance to the next goal.

near grail Apr 24, 2023, 11:29 AM

#

@void mortar my visitor count is not displaying on my website. Even though i can see it on my html go live, also, the database is working properly. What am i doing wrong?

void mortar Apr 24, 2023, 4:06 PM

#

so you can see on an a "html go live"? could you elaborate on what that is

#

since you've changed up your code, go ahead and put what your API response looks like, and how you're accessing it in your JS code

near grail Apr 25, 2023, 12:23 AM

#

<body onload="updateCounter()">
<script>
function updateCounter(){
fetch('https://pr7fo548q2.execute-api.us-east-1.amazonaws.com/Prod',{
method: 'GET'
})
.then(response => {
if (
// check if response's status is 200
response.ok
) {
return response.json()
} else {
throw new Error('something went wrong');
}
})
.then(data => document.getElementById("hits").innerText = data.Visit_Count)
}
</script>
Visits: <span id="hits"></span>

here is the code @void mortar. I used "go live server" on my vscode editor (it's an extension on vscode) to see changes i make on my code

void mortar Apr 25, 2023, 1:05 AM

#

okay-- and what does the API response look like on your browser?

near grail Apr 25, 2023, 3:45 AM

#

{"Visit_Count": "8"}

#

That is the response i get

void mortar Apr 25, 2023, 12:41 PM

#

ok, and does the counter element have a new Id called "hits"? it might be easier for you to just have your html code viewable on github so I can just work with the code itself instead of asking all these questions lol

near grail Apr 25, 2023, 4:19 PM

#

That will make sense! I will try and push my code to the github. Will keep you posted. Thanks

near grail Apr 26, 2023, 2:13 PM

#

@void mortar https://github.com/chidexhenry/cloud_resume_challenge. I uploaded my files. Thanks a lot

void mortar Apr 26, 2023, 8:17 PM

#

the visitor counter is working on my end too. if its not working on your website, whats the URL for it?

near grail Apr 26, 2023, 10:29 PM

#

chidihenryukaegbu.com

#

That's my resume website!

near grail Apr 27, 2023, 7:26 AM

#

@void mortar do you think CORS has anything to do with this issue?

void mortar Apr 27, 2023, 12:47 PM

#

not at the moment. i looked at your website source code by right clicking -> view page source but I don't even see your script here

#

it looks like the code you're serving isn't up to date

#

i would try to reupload your index.html and go to your website again

near grail Apr 28, 2023, 12:09 PM

#

Thank you so much @void mortar for that observation! I will try it and keep you posted

near grail May 1, 2023, 5:11 PM

#

@void mortar I was able to upload and update my distribution. It took some time though because at first my url stopped working but I figured it out. Thank you so much!! I have a quick question, at this stage, do I have to do the smoke test now or is it for later? I am just curious. If yes, do you have any resources to help me write the test. Thanks

void mortar May 2, 2023, 3:35 AM

#

in terms of the challenge, the tests are near the end, once you've written IaC code and start working on a CI/CD pipeline... though, once you've completed the challenge and have gotten a hang of everything, writing the tests first and then writing the code to pass the tests is a pretty good practice (called test driven development).

anyway, i would urge you to continue working on the rest of the challenge-- i bought the guidebook for the cloud challenge and it showed me a lot options/resources so i recommend it

near grail May 2, 2023, 6:47 AM

#

Thank you for the clarification! Yes, i have the book.

#Visitor counts not reflecting on my resume page