如何将 JSON API 返回 object 转换为数组用于 using.map()

Question

I am trying redux-thunk for the first time Hence working on a simple project the thunk uses the API and displays the data on the screen but the API is returning a JSON object,to display the titles on the screen I need to use the.map() function to map through the object, but the object doesn't allow us to use map() function so I need to convert the JSON data to an array and the use.map() function to achieve the desired result but I don't know how to convert the JSON data to an array I tried different approaches to deal with this but nothing seems to work for me Here is what I need

const codeReturnedFromJSONRequest ={data:{0:somedata}} //example JOSN data 

what I want my code to look like:

const requiredData=[{data:{0:somedata}}] //I want the required data to be an array so that I can use .map()

If you want my actual code here it is

 //ApiSlice

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const getPosts = createAsyncThunk("posts/getPosts", async () => {
  return fetch("https://api.jikan.moe/v4/anime?q=naruto&sfw").then((response) =>
    response.json()
  );
});
const postSlice = createSlice({
  name: "posts",
  initialState: {
    posts: [],
    loading: false,
  },
  extraReducers: {
    [getPosts.pending]: (state, action) => {
      state.loading = true;
    },
    [getPosts.fulfilled]: (state, action) => {
      state.loading = false;
      state.posts = action.payload;
    },
    [getPosts.rejected]: (state, action) => {
      state.loading = false;
    },
  },
});

export default postSlice.reducer

 //store

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "./anime";

export const store =configureStore({
  reducer: {
    post:postReducer
  }
}) 

//Api data

  import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getPosts } from "../store/anime";

function Apidata() {
  const { posts, loading } = useSelector((state) => state.post);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, []);
  console.log(posts.data)
  return (
    <div>
      {posts.map((item) => (
        <h2>{item.data}</h2>
      ))}
    </div>
  );
}

export default Apidata;

  // App.js
 import { Fragment, useState } from "react";
  import Apidata from "./components/Apidata";
  function App() {
    return (
      <Fragment>
        <Apidata/>
      </Fragment>
    )
  }

  export default App;

Answer 1

if you want create an array just wrap the response.json() in an array like that:

     export const getPosts = createAsyncThunk("posts/getPosts", async () => {
      return fetch("https://api.jikan.moe/v4/anime?q=naruto&sfw")
.then(response=>response.json())
.then((response) =>[response]
      );
    });

BUT I don't think it is a best practice. Ask to whom create the backend and get explanations., Hope the best for you, Mauro

Answer 2

This peace of code resolved my issue

const myObj = {0 : {mal_id: 20, url: 'https://myanimelist.net/anime/20/Naruto', images: 'test', trailer: 'test', approved: true}, 1: {mal_id: 20, url: 'https://myanimelist.net/anime/20/Naruto', images: 'test', trailer: 'test', approved: true}};

const myArr = [];

for (const key in myObj) {
    const arrObj = myObj[key];
  arrObj['id'] = key;
    myArr.push(arrObj)
}

console.log(myArr);

Click here to see the reddit post:

Solution reddit link