在对象内部呈现嵌套字符串

Question

我试图从JSON文件呈现字段的动态列表。有些字段必须经过我为键重命名目的而创建的accountFieldMap对象。

例如，它从JSON中找到键userFirstName1，并将其值呈现为组件中的firstName。

const accountFieldMap = {
firstName: "userFirstName1",
lastName: "userLastName1",
ID: "userID",
location: `userLocation.city`,
};

唯一的问题是location字段。我怎样才能让JavaScript知道它应该渲染city嵌套字段并将其显示为location?

Answer 1

如果我理解正确的话，location.city是object中某个值的路径。

有一些库可以解决这个问题，比如lodash，它有内置的函数可以解决这个问题，但如果你想在普通js中做到这一点，你可以通过将这个字符串用点分割然后遍历数组来获得一个值。

const getByPath = (path, obj) => {
const splittedPath = path.split(".");
return splittedPath.reduce((acc, curr) => {
acc = obj[curr];
return acc;
}, obj)
}

那么在这种情况下如果你有一个像

这样的对象

const testObj = {
location: {city: "Kyiv"},
firstName: "Oleg"
}

它会返回给你"基辅"如果你将通过getByPath"location.city"路径。如果没有嵌套，它也可以工作，所以

getByPath("firstName", testObj)

将返回你"Oleg">

Answer 2

您只需要映射数组并创建一个新对象;

import fileData from "../path/to/json";
const people = fileData.arrayName.map(person => ({
firstName: person.userFirstName1,
lastName: person.userLastName1,
ID: person.userID,
location: person.userLocation.city,
}));