在Javascript/React中如何将对象转换为数组

Question

使用REST获取一个对象（JSON格式），需要将其转换为数组，以便插入表格中。这是在React的渲染函数中完成的。输入每N分钟从后端更新一次。如何将对象转换为数组？我只需要值而不需要键，因为键已经作为表格中的列值存在。

- cbll

---

你尝试过为这个问题编写任何代码吗？ - Himanshu Tanwar

Answer 1

您可以使用Object#values (ECMAScript 2017)，但是IE不支持它（请参见浏览器兼容性）。

注意： ECMAScript 6规范定义了对象属性遍历的顺序。这篇博客文章详细解释了相关细节。

const map = { a: 1, b: 2, c: 3 };

const result = Object.values(map);

console.log(result);

如果你需要支持IE，可以使用Object#keys和Array#map：

const map = { a: 1, b: 2, c: 3 };

const result = Object.keys(map).map((key) => map[key]);

console.log(result);

- Ori Drori

---

谢谢，浏览器兼容性假定为最新版本；我认为你的第一种方法会起作用。现在我只需要看看如何从REST API获取数据，我已经在React中定义了它，如下所示：var tableDataMap = this.props.data.dataMap;，我需要将其传递给一个新的const，就像你上面的那样，我猜？大致是这样。 - cbll

在尝试之前，请先学习如何在JS中处理异步调用。有承诺、生成器和异步等待，但您应该从承诺开始。 - Ori Drori

你有相关的资料吗？如果可能的话。顺便说一下，console.log(Object.values(tableDataMap)); 可以在浏览器控制台上输出 REST API 数据... 但是我很难将它们正确地放入表格中。无论如何... 我认为在这里写太困难了。 - cbll

这是一个使用fetch和promises进行异步调用的教程 - JavaScript Promises: Plain and Simple。 - Ori Drori

Answer 2

我不确定您所说的“map”是指Map对象还是普通JS对象。然而，为了多样化，我想提一下，Map对象大多数情况下（可能总是）像JSON.stringify（[... myMap]）一样串行化。因此，如果您在JSON数据中收到Map对象，则应该执行类似以下操作：

var myMap = new Map().set(1,"hey").set(2,"you"),
  mapData = JSON.stringify([...myMap]),
   values = JSON.parse(mapData).map(d => d[1]);
console.log("mapData:",mapData);
console.log("values:",values);

- Redu

Answer 3

你可以先将初始值设置为数组。看这个例子：

const [conversations, setConversations] = useState([]); // fianal data is array

useEffect(() => {
    const fetchConversations = async () => {
       const res = await axios.get("/conversations/" + user._id);              
       setConversations(res.data);              
    };
    fetchConversations();
  }, [user._id]);

res.data 通过使用 useState([]) 作为初始值转换为数组，并通过使用 useState({}) 转换为对象。

然后映射这个数组：

return (
    <>
       {conversations.map((conv) => 
            (<Conversations key={conv._id} conversation={conv} />))}
    </>
)

- ParisaN

Answer 4

你可以先将初始值设置为数组。看这个例子：

const [conversations, setConversations] = useState([]); // fianal data is array

useEffect(() => {
    const fetchConversations = async () => {
       const res = await axios.get("/conversations/" + user._id);              
       setConversations(res.data);              
    };
    fetchConversations();
  }, [user._id]);

将 res.data 通过使用 useState([]) 作为初始值转换为数组，并通过使用 useState({}) 转换为对象。

另外，

返回：

``` {conversations.map((conv) => (

))} ```

- ParisaN