Cannot retrieve Title from Strapi

user_11511439 0
Viewed 65

I have collection type called posts and it has the following values:

enter image description here

Now to get the api I have a file in my lib folder which 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;
}

Now to display this I have 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)));
  //Parse and Stringify done since nextJs was having weird errors accepting the standard json from API
  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 am able to get the id correctly, but when I go to print the Title I get this error.

Cannot read property 'map' of undefined

So how do I retrieve my title correctly?

strapi next.js javascript
1 Answers

I believe the issue might be in your frontend function;

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;
}

It might not yield any post - i would debug the function. Is the "posts" const containing valid objects? does the return value seem correct or is it undefined?

Generally speaking, it would be much simpler for you to re-write the filter part of your function (everything beyond await response.json();) to use the js filter function.

Something like;

return posts.filter(post => post['...'].includes(postTitle));
user_67172430
Related