如何将对数组数组显示为键值对

Question

我正在用 Ract 编写一个客户端，它从后端接收表示对象的流数据。客户端解析此数据并将对象动态构建为 JavaScript 数据结构(通常是对象或数组)。 后端具有由时间戳键和任意值组成的Timeseries数据类型。一个Timeseries可以有重复的时间戳键，如下所示：

{
'2019-08-22T18:34:15.777927965Z' : 1,
'2019-08-22T18:34:15.777927965Z' : 2,
'2019-08-22T18:34:15.777927965Z' : 3,
}

这意味着我不能使用 javascript 对象在客户端中构建此数据结构，因为由于键相同，因此只会存储最后添加的键/值对。

我的解决方案是在数组中收集这些数据：

[
['2019-08-22T18:34:15.777927965Z', 1],
['2019-08-22T18:34:15.777927965Z', 2],
['2019-08-22T18:34:15.777927965Z', 3],
]

问题是我被要求以键/值格式显示此数据，就像javascript对象的显示方式一样。我正在使用react-json-treenpm 包来分发我正在构建的所有对象，这些对象只接受一个对象或数组，并在 UI 中使用可折叠的下拉箭头很好地格式化它(这不是必需的)。 我有哪些选项可以将代码中的数组数组转换为格式良好的对象，例如 UI 中的数据结构？

TLDR：如何显示这样的数组：

[
['2019-08-22T18:34:15.777927965Z', 1],
['2019-08-22T18:34:15.777927965Z', 2],
['2019-08-22T18:34:15.777927965Z', 3],
]

作为 UI 中的冒号分隔键/值对，喜欢对象？ 理想情况下，我可以将此数据结构传递到像react-json-tree这样的库中。

Answer 1

如果您希望数据以列表形式给出，可以通过以下方式显示数据：

const data = [
['2019-08-22T18:34:15.777927965Z', 1],
['2019-08-22T18:34:15.777927965Z', 2],
['2019-08-22T18:34:15.777927965Z', 3],
]

const Renderer = () =>
<ul>
{data.map(([key, val], id) => <li key={id}>{key}; {val}</li>)}
</ul>;

ReactDOM.render(<Renderer/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="root"/>

要使用react-json-tree显示它，如何将数组包装在一个对象中？

const data = [
['2019-08-22T18:34:15.777927965Z', 1],
['2019-08-22T18:34:15.777927965Z', 2],
['2019-08-22T18:34:15.777927965Z', 3],
]
<JSONTree data={{log: data}} />

或

const data = {
log : [
['2019-08-22T18:34:15.777927965Z', 1],
['2019-08-22T18:34:15.777927965Z', 2],
['2019-08-22T18:34:15.777927965Z', 3],
]
}
<JSONTree data={log} />