循环子对象中的键并显示键和值答案

【问题标题】：Loop over keys in a child object and display both key and value循环子对象中的键并显示键和值
【发布时间】：2021-04-23 14:41:09
【问题描述】：

我正在使用反应。我有从我的 API 获取的 JSON 格式的数据（已经转换为对象）。对象 -

{
    _id: '1',
    specs: {
        chip: 'H1-based',
        connectivity: 'Bluetooth 5.0',
    },
}

我要显示键值对（在网站上，这不是对象）

Chip: H1-based
Connectivity: Bluetooth 5.0

这是我想在我的代码中添加必要逻辑的地方 -

<ListGroup.Item className="product__detail-row">
    The entire object shown above is in a variable called product.
</ListGroup.Item>

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

您可以使用类似于{valueHere} 的 JSX 表达式将文本放入 JSX。您可以通过Object.entries 函数以[key, value] 对的形式获取对象的条目，然后通过map 将它们映射到JSX 元素。因此，将其应用于您的情况：

<ListGroup.Item className="product__detail-row">
{Object.entries(product.specs).map(([key, value]) =>
    <div>{initialCap(key)}: {value}</div>
)}
</ListGroup.Item>

在该示例中，我将每个键/值对的显示包装在 div 中，但您可以使用适合您情况的任何内容。

我在那里使用了一个假设函数initialCap 将您的属性名称（全部小写）转换为初始大写的字符串。 FWIW，该功能的简单版本可能是：

function initialCap(str) {
    return str.charAt(0).toLocaleUpperCase() + str.substring(1);
}

...虽然由于 JavaScript 字符实际上是 UTF-16 代码单元，有时需要一对代码单元来制作一个“字符”，但更通用的版本可能在代码 points 中工作代码单位：

function initialCap(str) {
    const [first] = str; // Spread and destructuring work by code _points_, not code units
    return first.toLocaleUpperCase() + str.substring(first.length);
}

【讨论】：

【解决方案2】：

ToolJS 有一个“Obj”模块，该模块包含一个循环对象的方法，为每个属性对触发回调，将属性键和值输出到每个属性的回调参数。

通过NPM 或CDN 获取库

// require the Obj module from the package
const { Obj } = require("@redakaa/tooljs");

// use the .forEach method available to the Obj module
Obj.forEach(myObj, function(key, value){
    console.log(`Current key: ${key}, Current value: ${value}`);
});

查看库的完整文档here

参考：ToolJS Object Manipulation

【讨论】：