JSON format leads to .map is not a function-CodePudding

With the current way strapi outputs a JSON I always get the error .map is not a function. It is a NEXT.JS Frontent. Could it be that this comes from the JSON not being output as an Array?

import React, { useEffect } from "react";

export default function Home({ posts }) {
  return (
    <div>
      {posts &&
        posts.map((post) => (
          <div key={post.id}>
            <h2>{post.title}</h2>
          </div>
        ))}
    </div>
  );
}

export async function getStaticProps() {
  // get games from the api
  const res = await fetch("http://localhost:1337/api/games");
  const posts = await res.json();
  return {
    props: { posts },
  };
}

here I get: TypeError: posts.map is not a function

does anyone has a tip for a JS beginner how to fix that?

the JSON output is the following:

{"data":[{"id":1,"attributes":{"title":"Guild Wars 2","createdAt":"2022-02-04T20:14:17.254Z","updatedAt":"2022-02-05T10:52:55.696Z","publishedAt":"2022-02-05T10:52:55.693Z","url":"https://www.guildwars2.com","description":"Guild Wars 2 is an online role-playing game with fast-paced action combat, a rich and detailed universe of stories, awe-inspiring landscapes to explore, two challenging player vs. player modes—and no subscription fees!","free":false,"feature_combat":"Fast-paced combat and choose from an arsenal of professions, weapons, and playstyles. Attack on the move, dodge and roll away from enemy blows, and come to your allies' rescue midbattle.","feature_world":"A beautifull designed, rich and detailed universe of stories, awe-inspiring landscapes to explore.","feature_quests":"No questgivers but an exploartion oriented roam around quest system with housands of stories that change based on the actions of players like you.","feature_grouping":"In the open world, you can team up with every player you meet—no grouping required! Also offeres Raids and dungeons for groups.","feature_usp":"Quick, furious matches between small groups of players in organized PvP or join hundreds of other players in the grand battles of World vs. World"}},{"id":2,"attributes":{"title":"Firefly Online","createdAt":"2022-02-05T11:01:39.549Z","updatedAt":"2022-02-05T11:04:40.562Z","publishedAt":"2022-02-05T11:04:40.558Z","url":"www.keepflying.com","description":"\nFACTS\nOS:\nSetting:\nSci-Fi\nGenre:\nRPG\nRelease Year:\n2014\nPayment Model:\nfree to play\nPVP:\nPay for features:\nItem Shop:\nMonthly fee:\nLanguage: ","free":null,"feature_combat":"Seek out adventures","feature_world":"Assume the role of a ship captain – create a crew and customize a ship","feature_quests":"Online role playing game based on Firefly, Joss Whedon’s cult-hit television series Firefly","feature_grouping":"Hire a crew","feature_usp":"Cross-platform player experience across devices"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":2}}}

CodePudding user response：

This is because posts is a JSON object and not an array that you can use the map() function with. Instead, you need to give the array to the map() function before you can pull out the titles.

To access the array of the JSON object, you can use posts['data'].

export default function Home({ posts }) {
  return (
    <div>
      {posts &&
        posts["data"].map((post) => (
          <div key={post.id}>
            <h2>{post.attributes.title}</h2>
          </div>
        ))}
    </div>
  );
}