遍历子对象中的键并同时显示键和值

Question

我正在使用react。我有数据我从JSON(已经转换为对象)的形式我的API。对象-

{
_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>

Answer 1

您可以使用JSX表达式将文本放入JSX中，该表达式类似于{valueHere}。您可以通过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来转换您的属性名称，它们都是小写的，以初始大写字符串。顺带一提，这个函数的一个简单版本可能是:

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

…由于JavaScript字符是有效的UTF-16代码单元，有时需要一对代码单元来组成一个字符，更通用的版本可以用代码points代替代码units:

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

Answer 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}`);
});

查看库的完整文档在这里

Ref: ToolJS Object Manipulation