reactjs 呈现对象内部的嵌套字符串

ncgqoxb0  于 2022-11-29  发布在  React
关注(0)|答案(2)|浏览(163)

我正在尝试从JSON文件中呈现一个动态字段列表。一些字段必须通过我为键重命名而创建的这个accountFieldMap对象。
例如,它从JSON中找到关键字userFirstName1,并在组件中将其值呈现为firstName

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

唯一的问题是location字段。我如何让JavaScript知道它应该呈现city嵌套字段并将其显示为location

0pizxfdo

0pizxfdo1#

如果我没理解错的话,location.city是指向object中某个值的路径。
有一些库可以解决这个问题,比如lodash,它有内置的函数可以解决这个问题,但是如果你想在vanilla 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"
}

如果您将“www.example.com“作为路径传入getByPath,它将返回“基辅”location.city。如果没有嵌套,它也将工作,因此

getByPath("firstName", testObj)

我会把“奥列格”还给你

jchrr9hc

jchrr9hc2#

只需Map数组并创建一个新对象;

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,
}));

相关问题