Hi.
Anyone who can help me with this problem - (Im studying Front-End Dev)?
I have an API from WordPress:
https://falchhanssen.net/student/ProjectExam1/blog/wp-json/wp/v2/posts/ and from this I can access my text ( under description.rendered). But I need to go to this URL
https://falchhanssen.net/student/ProjectExam1/blog/wp-json/wp/v2/media/ to get the images, titles etc.
I keep getting errors...
My files:
HTML:
JAVASCRIPT:
Anyone who can help me with this problem - (Im studying Front-End Dev)?
I have an API from WordPress:
https://falchhanssen.net/student/ProjectExam1/blog/wp-json/wp/v2/posts/ and from this I can access my text ( under description.rendered). But I need to go to this URL
https://falchhanssen.net/student/ProjectExam1/blog/wp-json/wp/v2/media/ to get the images, titles etc.
I keep getting errors...
My files:
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>Document</title>
<script src="js/loading.js"></script>
<link rel="stylesheet" href="css/loading.css">
</head>
<body>
<main>
<h1 id="tittel" class="tittel">Tittel</h1>
<div class="loading"></div>
<div class="container">
<div id="titleContainer">
</div>
<div id="dateContainer">
</div>
<div id="imageContainer">
</div>
<div id="textContainer">
</div>
</div>
</main>
<script src="js/details.js" defer></script>
</body>
</html>
JAVASCRIPT:
const query = document.location.search;
const params = new URLSearchParams(query);
const id = params.get("id");
const post = id;
const apiBase = "https://falchhanssen.net";
const blogBase = "/student/ProjectExam1/blog";
const postBase = "/wp-json/wp/v2/posts";
const mediaBase = "/wp-json/wp/v2/media";
// const fullPostURL = apiBase + blogBase + postBase + id;
// const fullMediaURL = apiBase + blogBase + mediaBase + post;
const fullPostURL = 'https://falchhanssen.net/student/ProjectExam1/blog/wp-json/wp/v2/posts/' + id;
const fullMediaURL = 'https://falchhanssen.net/student/ProjectExam1/blog/wp-json/wp/v2/media/' + id;
async function getDetail() {
const responsePost = await fetch(fullPostURL);
const dataPost = await responsePost.json();
console.log('dataPost: ', dataPost);
const responseMedia = await fetch(fullMediaURL);
const dataMedia = await responseMedia.json();
console.log('dataMedia: ', dataMedia);
const titleContainer = document.getElementById("titleContainer");
const dateContainer = document.getElementById("dateContainer");
const imageContainer = document.getElementById("imageContainer");
const textContainer = document.getElementById("textContainer");
titleContainer.innerHTML += `<div>${dataMedia.title}</div>`;
dateContainer.innerHTML += `<div>${dataMedia.date}</div>`;
imageContainer.innerHTML += `<div>${dataMedia.medium}</div>`;
textContainer.innerHTML += `<div>${dataPost.description}</div>`;
console.log('title: ', dataMedia.title);
try {
console.log(dataMedia.title);
} catch (err) {
alert(err);
}
}
getDetail();
