<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSON Test</title>
</head>
<body>
<h1>Hello World</h1>
<div id="myData"></div>
<script>
fetch('http://localhost:3000/api/product/1234567')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
console.log(data)
var mainContainer = document.getElementById("myData");
for (let key in data) {
var div = document.createElement("div");
div.innerHTML = 'name: ' + data[key] + 'label' + data[key];
mainContainer.appendChild(div);
}
}
</script>
</body>
</html>
Trying to fetch the json response and display it on html page. It's giving me an error: SyntaxError: Unexpected end of JSON input. I guess I'm here to maybe get some help on how to fix this and why this is happening. Thank you.
edit:
The response I get on my console :
{
product: 1234567,
name: 'TV',
salePrice: 149.99
}
The major reason is your response is not in the JSON format, which could be because of getting some non-json format response. Please post the sample JSON response format to understand better.
Related
I am currently building a football website using LiveScore API to fetch data. Needless to say, I am actually learning API fetch using this project. This api fetch current day's fixture. I tried to get the two teams T1 and T2 with their name playing against each other in my HTML file. I got the output below.
Output and api
There are overall 81 arrays, and I want to display logo of the team which is in T1 and T2 array in Img section just before the team name. But only a placeholder is displaying. What am I doing wrong?
I wrote some HTML and JS to fetch the data.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football Live Today</title>
</head>
<body>
<div>
<h2>Football Live Today</h2>
<h3>Today's Fixtures</h3>
<ul>
<li id="fixtures"></li>
</ul>
</div>
<script src="popup.js"></script>
</body>
</html>
JS
async function fetchData() {
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': '********',
'X-RapidAPI-Host': 'livescore6.p.rapidapi.com'
}
};
const res = await fetch('https://livescore6.p.rapidapi.com/matches/v2/list-by-date?Category=soccer&Date=20231801&Timezone=-7', options)
const record = await res.json()
console.log('record', record)
const indices = [0, 1, 4, 49, 50];
const filteredStages = record.Stages.filter((stage, index) => indices.includes(index));
document.getElementById("fixtures").innerHTML = filteredStages.map(item => `
<li>${item.Cnm} | ${item.Snm} | <img src="('${item.Events[0].T1[0].Img}">
${item.Events[0].T1[0].Nm} Vs <img src="${item.Events[0].T2[0].Img}">
${item.Events[0].T2[0].Nm}</li>`);
}
fetchData();
This question already has answers here:
Template literals like 'some ${string}' or "some ${string}" are not working
(7 answers)
How can I do string interpolation in JavaScript?
(21 answers)
Closed 4 months ago.
I am attempting to fetch an API for the user names. but instead of listing names it lists {user.name} rather than the actual names.
How it should look like:
How it ends up looking:
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Users</title>
</head>
<body>
<h2>Users:</h2>
<ul></ul>
<script>
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => {
return res.json();
})
.then(data => {
data.forEach(user => {
const markup = '<li>${user.name}</li>';
document.querySelector('ul').insertAdjacentHTML('beforeend', markup);
});
})
.catch(error => console.log(error));
</script>
</body>
</html>
What am I doing wrong?
When trying to connect the metamask wallet with my local site i am getting this error
I am Using the eth_requestAccounts methord but getting the down err
inpage.js:8 Uncaught (in promise) Error: 'args.method' must be a non-empty string.
at o (inpage.js:8:31826)
at Object.invalidRequest (inpage.js:8:32276)
at l.request (inpage.js:1:37391)
at HTMLButtonElement.Connect (index.js:13:27)
this was the error being Printed on MY console
// HOW TO CONNECT YOUR METAMASK TO YOUR FRONTEND
const button = document.getElementById("ConnectButton");
//button.addEventListener('click',connect);
if (button) {
console.log("button successfully imported");
} else {
console.log("BUtton is not imported");
}
const Connect = async () => {
if (typeof window.ethereum !== "undefined") {
await window.ethereum.request({ methord: "eth_requestAccounts" });
button.innerHTML = "Connected";
} else {
button.innerHTML = "Pls install metamask";
}
};
button.addEventListener("click", Connect);
MY index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FUND ME</title>
</head>
<body>
<h1>HELLO WORLD
</h1>
<button id="ConnectButton">Connect</button>
<script src="index.js"></script>
</body>
</html>
MY index.html
It might likely be a typo error. You have methord instead of method
In my Angular app I want to send me error details to my spring endpoint when cricital angular error/bundle error occurs - Angular errors are catched by handleErrors.
So I heard about window.onerror function, so I added this in my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<script type="text/javascript">
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
};
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Later I want send error data to server, but now I'm just testing it.
And when I specially create error which occurs an Angular compile error I have no alert, just failed to compile
or blank page with get
and looks like onerror doesnt catch it.
Angular provides a common method to handle Error. What you should do is to create a class implements ErrorHandler:
import { ErrorHandler } from '#angular/core';
export class AppGlobalErrorhandler implements ErrorHandler {
handleError(error) {
console.warn("customize catch execption:"+error);
}
}
Then, in app.module.ts, you tell Angular to use our Custom Error Handler, configing in providers:
providers: [
// ...
{
provide: ErrorHandler,
useClass: AppGlobalErrorhandler
}
]
Reference：https://golb.hplar.ch/2018/10/global-errorhandler-angular.html
I try to post a "watch" action but I've always this error:
Error occured
Type: OAuthException
Message: Unknown path components: /MyAppName:watch
This is my JS function:
function postWatch()
{
FB.api('/me/MyAppName:watch' +
'?video=http//myLink.com','post',
function(response) {
var msg = 'Error occured';
if (!response || response.error) {
if (response.error) {
msg += "\n\nType: "+response.error.type+"\n\nMessage: "+response.error.message;
}
alert(msg);
}
else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
This is my og:tag
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
<meta property="fb:app_id" content="MyAppID" />
<meta property="og:title" content="MyTitle" />
<meta property="og:image" content="http://MyUrlImage.com" />
<meta property="og:description" content="MyDescription" />
<meta property="og:url" content="MyLink.com">
<meta property="og:site_name" content="MySiteName" />
<meta property="og:type" content="video.movie" />
Any ideas ?
Thanks ;)
PS: Sorry for my poor english, I'm french ;)
Regards
For built-in actions the syntax is different. Use video.watches
Actually for your own actions/objects you could use the next syntax:
var params = {};
params['video'] = 'http://example.com/myvideo.html';
FB.api('me/mynamespace:watch','post',params,function(response){
console.log(response);
});
This will actually publish on your wall the action with the object, if your user has provided the publish_actions permission.
For the permissions thing you would probably want to make sure you have the permission, so your check should look something like this:
FB.api('me/permissions','get',function(response){
if (response.data[0].publish_actions){
//do your magic
}
});