在反应中渲染哈希图数据

Question

我正在从 api 中检索散列映射数据到我的 React 应用程序中。数据看起来像这样..

[
    [
        "d243dc7-6fe8-151b-4ca8-1be528f2b36",
        "[\"Jonny\",70]"
    ],
    [
        "8affa17-76d1-13e-6380-7cd2a3e3647",
        "[\"Lucy\",106,"pic3.jpg"]"
    ],
    [
        "841cb28-24c7-872-3c66-63253800c8d",
        "[\"Mike\",0]"
    ],
    [
        "6128e-182-cfb4-708b-c40a3ba2e6e",
        "[\"Elodie\",23,"me.jpg"]"
    ],
    [
        "e55ef4c-8d41-3be4-27d-aae53330584",
        "[\"Jacob\",9,"img-004.jpeg"]"
    ]
]

我需要将这些数据渲染成 table。

使用 map 和 with with data.slice(0, 1) 我设法提取了密钥（长字符串），但我需要帮助来分离名称、编号和可选图像。我尝试尝试各种运算符。我认为这会起作用

{data.slice(1, 2).toString().substring(2,data.slice(1, 2).length-2)}

但它只是 returns ["

我希望有更简单的方法！

Answer 1

您以一种奇怪的格式呈现数据，但这行得通：

const data = [
    [
        "d243dc7-6fe8-151b-4ca8-1be528f2b36",
        "[\"Jonny\",70]"
    ],
    [
        "8affa17-76d1-13e-6380-7cd2a3e3647",
        "[\"Lucy\",106,\"pic3.jpg\"]"
    ],
    [
        "841cb28-24c7-872-3c66-63253800c8d",
        "[\"Mike\",0]"
    ],
    [
        "6128e-182-cfb4-708b-c40a3ba2e6e",
        "[\"Elodie\",23,\"me.jpg\"]"
    ],
    [
        "e55ef4c-8d41-3be4-27d-aae53330584",
        "[\"Jacob\",9,\"img-004.jpeg\"]"
    ]
];

const data1 = JSON.parse(data.slice(1, 2)[0][1]);

console.log('name', data1[0]);
console.log('numb', data1[1]);
console.log('file', data1[2]);

Answer 2

{data.slice(1, 2).toString().substring(2,data.slice(1, 2).length-2)}
                                       ^ ^^^^^^^^^^^^^^^^

在字符串 "["Jonny",70]" 中，你只想跳过第一个字符 "["，所以你的 substring() 的第一个参数应该是索引 1
你忘了把 data.slice(1, 2) 转成字符串，所以它仍然是一个数组，它的长度是 1

所以你的代码应该修改为：

data.slice(1, 2).toString().substring(1, data.slice(1, 2).toString().length - 2)

在反应中渲染哈希图数据

render hashmap data in react

javascript

hashmap

reactjs