I have a collection type named posts with the following values:
https://i.sstatic.net/49OeV.png
To access the API, I have a file in my lib folder that contains the following code:
export async function getPosts() {
var api_base_url = process.env.API_BASE_URL;
const response = await fetch(api_base_url + "/posts");
const posts = await response.json();
return posts;
}
export async function getPost(postId) {
var api_base_url = process.env.API_BASE_URL;
const response = await fetch(api_base_url + "/posts/" + postId);
const post = await response.json();
return post;
}
export async function getPostFromTitle(postTitle, lang) {
var api_base_url = process.env.API_BASE_URL;
const response = await fetch(api_base_url + "/posts");
const posts = await response.json();
var postObject = {};
posts.forEach(post => {
if (post['Title (' + lang.toUpperCase() + ')'] == postTitle) {
postObject = post;
}
});
return postObject;
}
To display this data, I used the following code:
import { getPosts, getPostFromTitle } from '../lib/apiGet'
export async function getStaticProps() {
const allPosts = JSON.parse(JSON.stringify(await getPosts()));
const postsTitle = JSON.parse(JSON.stringify(await getPostFromTitle(postTitle, lang)));
return {
props: {
allPosts,
postsTitle
}
}
}
export default function Home({ allPosts, postsTitle }) {
return (
<div>
<body>
<ul>
{allPosts.map(post => (
<h1><u>
{console.log(post.id)}
{post.id}
</u>
</h1>
))}
</ul>
<ul>
{postsTitle.map((postTitle, lang) => (
<h1><u>
{console.log(postTitle.Title)}
{postTitle.Title}
</u>
</h1>
))}
</ul>
</body>
</div>
);
}
I can retrieve the id correctly, but encountering an error when trying to print the Title.
https://i.sstatic.net/gXmkh.png
How can I properly retrieve the title?