如何转换 JSON API 将对象返回到数组以使用 .map()答案

【问题标题】：how to convert a JSON API returns an object to an array for using .map()如何转换 JSON API 将对象返回到数组以使用 .map()
【发布时间】：2022-09-23 23:33:32
【问题描述】：

我第一次尝试 redux-thunk 因此在一个简单的项目上工作，thunk 使用 API 并在屏幕上显示数据，但 API 返回一个 JSON 对象，以在屏幕上显示我需要使用的标题。 map() 函数通过对象进行映射，但是该对象不允许我们使用 map() 函数，所以我需要将 JSON 数据转换为数组并使用 .map() 函数来实现所需的结果但是我不知道如何将 JSON 数据转换为数组我尝试了不同的方法来处理这个问题，但似乎没有什么对我有用这就是我需要的

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

我希望我的代码看起来像什么：

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

如果你想要我的实际代码，那就是

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

如果返回多个，响应会是什么样子？ {data:{0:blah, 1:foo}} ?
请记住，JSON 是一个对象，因此您不能拥有[{data:{0:somedata}}]。如果你想要一个 JSON 中的数组，你需要像 {array_data: [{data:{0:somedata}}]} 这样的东西
是的，我尝试了第二种方法，我在 post:[] 的地方做了类似的事情
react_devtools_backend.js:4026 在路径中的操作中检测到不可序列化的值：payload.0。值：Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: \"fulfilled\"[[PromiseResult]]: Object

标签： javascript reactjs json

【解决方案1】：

如果你想创建一个数组，只需将 response.json() 包装在一个数组中，如下所示：

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

但我认为这不是最佳做法。询问谁创建了后端并获得解释！希望给你最好的，毛罗

【讨论】：

我试过了，但现在我收到一个错误消息
react_devtools_backend.js:4026 在路径中的操作中检测到不可序列化的值：payload.0。值：承诺 {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: Object
抱歉，我认为是因为我忘记了第二个 .then()。我更新了上面的代码。 .then(response=>response.json()) .then((response) =>[response]

【解决方案2】：

这种和平的代码解决了我的问题

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

点击这里查看reddit帖子：

Solution reddit link

【讨论】：