how to convert a JSON API returns an object to an array for using .map()

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

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

Advertisement

Answer