将 JavaScript 对象属性与同一 JavaScript 对象中的另一个属性映射

IT技术 javascript reactjs
2021-04-28 11:02:35

我有一个 JavaScript 对象，我期待map()它Id与id同一个 JavaScript 对象中的另一个，我的 JavaScript 对象架构是

var items = [
  {
    BossId: "03",
    DateOfBirth: "1966-09-27T00:00:00",
    FamilyName: "Montejano",
    Gender: "Unspecified",
    GivenName: "Trinh",
    Id: "08",
    Title: "Tech Manager"
  },
  {
    BossId: "00",
    DateOfBirth: "1927-01-29T00:00:00",
    FamilyName: "Fetzer",
    Gender: "Unspecified",
    GivenName: "Winfred",
    Id: "00",
    Title: "CEO"
  },
  {
    BossId: "01",
    DateOfBirth: "1927-08-20T00:00:00",
    FamilyName: "Dandrea",
    Gender: "Male",
    GivenName: "Erich",
    Id: "02",
    Title: "VP of Marketing"
  },
  {
    BossId: "01",
    DateOfBirth: "1929-02-07T00:00:00",
    FamilyName: "Nisbet",
    Gender: "Male",
    GivenName: "Reinaldo",
    Id: "03",
    Title: "VP of Technology"
  },
  {
    BossId: "01",
    DateOfBirth: "1932-06-13T00:00:00",
    FamilyName: "Bufford",
    Gender: "Unspecified",
    GivenName: "Alleen",
    Id: "04",
    Title: "VP of HR"
  },
  {
    BossId: "02",
    DateOfBirth: "1936-09-26T00:00:00",
    FamilyName: "Klopfer",
    Gender: "Female",
    GivenName: "Kristyn",
    Id: "05",
    Title: "Director of Marketing"
  },
  {
    BossId: "01",
    DateOfBirth: "1937-11-23T00:00:00",
    FamilyName: "Duhon",
    Gender: "Male",
    GivenName: "Sophie",
    Id: "01",
    Title: "Tech Manager"
  },
  {
    BossId: "03",
    DateOfBirth: "1948-04-05T00:00:00",
    FamilyName: "Mirabal",
    Gender: "Female",
    GivenName: "Suanne",
    Id: "07",
    Title: "Tech Manager"
  },
  {
    BossId: "04",
    DateOfBirth: "1966-10-13T00:00:00",
    FamilyName: "Maslowski",
    Gender: "Unspecified",
    GivenName: "Norah",
    Id: "09",
    Title: "Tech Manager"
  },
  {
    BossId: "06",
    DateOfBirth: "1967-08-25T00:00:00",
    FamilyName: "Redford",
    Gender: "Female",
    GivenName: "Gertrudis",
    Id: "10",
    Title: "Tech Lead"
  },
  {
    BossId: "06",
    DateOfBirth: "1968-12-26T00:00:00",
    FamilyName: "Tobey",
    Gender: "Male",
    GivenName: "Donovan",
    Id: "11",
    Title: "Tech Lead"
  },
  {
    BossId: "09",
    DateOfBirth: "1969-10-16T00:00:00",
    FamilyName: "Vermeulen",
    Gender: "Male",
    GivenName: "Rich",
    Id: "12",
    Title: "Trainer Lead"
  },
  {
    BossId: "09",
    DateOfBirth: "1972-10-16T00:00:00",
    FamilyName: "Knupp",
    Gender: "Male",
    GivenName: "Santo",
    Id: "13",
    Title: "HR Manager"
  },
  {
    BossId: "12",
    DateOfBirth: "1974-03-23T00:00:00",
    FamilyName: "Grooms",
    Gender: "Female",
    GivenName: "Jazmin",
    Id: "14",
    Title: "Trainer"
  },
  {
    BossId: "13",
    DateOfBirth: "1978-08-25T00:00:00",
    FamilyName: "Cheeks",
    Gender: "Female",
    GivenName: "Annelle",
    Id: "15",
    Title: "Recruiter"
  },
  {
    BossId: "15",
    DateOfBirth: "1979-08-21T00:00:00",
    FamilyName: "Harshaw",
    Gender: "Unspecified",
    GivenName: "Eliza",
    Id: "16",
    Title: "Trainer"
  },
  {
    BossId: "08",
    DateOfBirth: "1980-02-09T00:00:00",
    FamilyName: "Broaddus",
    Gender: "Unspecified",
    GivenName: "Xiomara",
    Id: "17",
    Title: "Senior Software Developer"
  },
  {
    BossId: "11",
    DateOfBirth: "1981-09-08T00:00:00",
    FamilyName: "Jungers",
    Gender: "Unspecified",
    GivenName: "Erminia",
    Id: "18",
    Title: "Software Developer"
  },
  {
    BossId: "10",
    DateOfBirth: "1984-03-18T00:00:00",
    FamilyName: "Moffatt",
    Gender: "Female",
    GivenName: "Maria",
    Id: "19",
    Title: "Software Developer"
  },
  {
    BossId: "10",
    DateOfBirth: "1990-09-24T00:00:00",
    FamilyName: "Grimaldo",
    Gender: "Female",
    GivenName: "Tammera",
    Id: "20",
    Title: "Senior Software Developer"
  },
  {
    BossId: "10",
    DateOfBirth: "1992-06-18T00:00:00",
    FamilyName: "Das",
    Gender: "Female",
    GivenName: "Sharyl",
    Id: "21",
    Title: "Software Developer"
  },
  {
    BossId: "08",
    DateOfBirth: "1993-11-15T00:00:00",
    FamilyName: "Harlan",
    Gender: "Unspecified",
    GivenName: "Shan",
    Id: "22",
    Title: "UI Developer"
  },
  {
    BossId: "11",
    DateOfBirth: "1997-03-23T00:00:00",
    FamilyName: "Almeida",
    Gender: "Female",
    GivenName: "Mariah",
    Id: "23",
    Title: "QA Tester"
  },
  {
    BossId: "11",
    DateOfBirth: "1998-11-10T00:00:00",
    FamilyName: "Kerfien",
    Gender: "Male",
    GivenName: "Darnell",
    Id: "24",
    Title: "QA Tester"
  },
  {
    BossId: "11",
    DateOfBirth: "2004-04-22T00:00:00",
    FamilyName: "Vierra",
    Gender: "Female",
    GivenName: "Janell",
    Id: "25",
    Title: "QA Tester"
  }
];

我想创建一个函数，当提供时BossId将输出向该老板报告的员工列表。例如，输出为BossId '03'将

[
  {
    "BossId": "03",
    "DateOfBirth": "1966-09-27T00:00:00",
    "FamilyName": "Montejano",
    "Gender": "Unspecified",
    "GivenName": "Trinh",
    "Id": "08",
    "Title": "Tech Manager"
  },
  {
    "BossId": "03",
    "DateOfBirth": "1948-04-05T00:00:00",
    "FamilyName": "Mirabal",
    "Gender": "Female",
    "GivenName": "Suanne",
    "Id": "07",
    "Title": "Tech Manager"
  }
]

我试过的：

items.map(res => ({
  ...res.Users,
  Users: items
    .filter(id => id.Id == id.BossId)
    .map(({ Id, ...rest }) => rest)
  }))
3个回答

您应该使用filter而不是map. Map 总是创建一个与原始长度相同的数组，而过滤将产生一个子集：

function getItemsByBossId (items, id) {
  return items.filter(item => item.BossId === id)
}

您可以更进一步，为任何属性（或它们的组合）创建一个通用过滤器函数，如下所示：

function filterItemsBy (items, filter = {}) {
  const filterBy = Object.entries(filter).reduce(
    (acc, [key, value]) => item => item[key] === value && acc(item),
    () => true
  )

  return items.filter(filterBy)
}

// usage
const items = [{BossId:'03',DateOfBirth:'1966-09-27T00:00:00',FamilyName:'Montejano',Gender:'Unspecified',GivenName:'Trinh',Id:'08',Title:'Tech Manager'},{BossId:'00',DateOfBirth:'1927-01-29T00:00:00',FamilyName:'Fetzer',Gender:'Unspecified',GivenName:'Winfred',Id:'00',Title:'CEO'},{BossId:'01',DateOfBirth:'1927-08-20T00:00:00',FamilyName:'Dandrea',Gender:'Male',GivenName:'Erich',Id:'02',Title:'VP of Marketing'},{BossId:'01',DateOfBirth:'1929-02-07T00:00:00',FamilyName:'Nisbet',Gender:'Male',GivenName:'Reinaldo',Id:'03',Title:'VP of Technology'},{BossId:'01',DateOfBirth:'1932-06-13T00:00:00',FamilyName:'Bufford',Gender:'Unspecified',GivenName:'Alleen',Id:'04',Title:'VP of HR'},{BossId:'02',DateOfBirth:'1936-09-26T00:00:00',FamilyName:'Klopfer',Gender:'Female',GivenName:'Kristyn',Id:'05',Title:'Director of Marketing'},{BossId:'01',DateOfBirth:'1937-11-23T00:00:00',FamilyName:'Duhon',Gender:'Male',GivenName:'Sophie',Id:'01',Title:'Tech Manager'},{BossId:'03',DateOfBirth:'1948-04-05T00:00:00',FamilyName:'Mirabal',Gender:'Female',GivenName:'Suanne',Id:'07',Title:'Tech Manager'},{BossId:'04',DateOfBirth:'1966-10-13T00:00:00',FamilyName:'Maslowski',Gender:'Unspecified',GivenName:'Norah',Id:'09',Title:'Tech Manager'},{BossId:'06',DateOfBirth:'1967-08-25T00:00:00',FamilyName:'Redford',Gender:'Female',GivenName:'Gertrudis',Id:'10',Title:'Tech Lead'},{BossId:'06',DateOfBirth:'1968-12-26T00:00:00',FamilyName:'Tobey',Gender:'Male',GivenName:'Donovan',Id:'11',Title:'Tech Lead'},{BossId:'09',DateOfBirth:'1969-10-16T00:00:00',FamilyName:'Vermeulen',Gender:'Male',GivenName:'Rich',Id:'12',Title:'Trainer Lead'},{BossId:'09',DateOfBirth:'1972-10-16T00:00:00',FamilyName:'Knupp',Gender:'Male',GivenName:'Santo',Id:'13',Title:'HR Manager'},{BossId:'12',DateOfBirth:'1974-03-23T00:00:00',FamilyName:'Grooms',Gender:'Female',GivenName:'Jazmin',Id:'14',Title:'Trainer'},{BossId:'13',DateOfBirth:'1978-08-25T00:00:00',FamilyName:'Cheeks',Gender:'Female',GivenName:'Annelle',Id:'15',Title:'Recruiter'},{BossId:'15',DateOfBirth:'1979-08-21T00:00:00',FamilyName:'Harshaw',Gender:'Unspecified',GivenName:'Eliza',Id:'16',Title:'Trainer'},{BossId:'08',DateOfBirth:'1980-02-09T00:00:00',FamilyName:'Broaddus',Gender:'Unspecified',GivenName:'Xiomara',Id:'17',Title:'Senior Software Developer'},{BossId:'11',DateOfBirth:'1981-09-08T00:00:00',FamilyName:'Jungers',Gender:'Unspecified',GivenName:'Erminia',Id:'18',Title:'Software Developer'},{BossId:'10',DateOfBirth:'1984-03-18T00:00:00',FamilyName:'Moffatt',Gender:'Female',GivenName:'Maria',Id:'19',Title:'Software Developer'},{BossId:'10',DateOfBirth:'1990-09-24T00:00:00',FamilyName:'Grimaldo',Gender:'Female',GivenName:'Tammera',Id:'20',Title:'Senior Software Developer'},{BossId:'10',DateOfBirth:'1992-06-18T00:00:00',FamilyName:'Das',Gender:'Female',GivenName:'Sharyl',Id:'21',Title:'Software Developer'},{BossId:'08',DateOfBirth:'1993-11-15T00:00:00',FamilyName:'Harlan',Gender:'Unspecified',GivenName:'Shan',Id:'22',Title:'UI Developer'},{BossId:'11',DateOfBirth:'1997-03-23T00:00:00',FamilyName:'Almeida',Gender:'Female',GivenName:'Mariah',Id:'23',Title:'QA Tester'},{BossId:'11',DateOfBirth:'1998-11-10T00:00:00',FamilyName:'Kerfien',Gender:'Male',GivenName:'Darnell',Id:'24',Title:'QA Tester'},{BossId:'11',DateOfBirth:'2004-04-22T00:00:00',FamilyName:'Vierra',Gender:'Female',GivenName:'Janell',Id:'25',Title:'QA Tester'}]

console.log(filterItemsBy(items, { BossId: '03' }))

您可以使用过滤器（如 djfdev 所述）或像这样自己创建一个函数 

 function provideID (mainItem, id) {
    let arrayData = [] //We will push data to this array 
    for (let i=0; i<mainItem.length; i++) {
        if (Number(mainItem[i]["BossId"]) === id) arrayData.push(mainItem[i])
    }
    return arrayData;
  }

  console.log(provideID(items, 10))

这里mainItem 是你的数据数组对象，Id 是你需要数据对应的 BossID

请记住，您很可能会传递整数，而您的BossID 是一个字符串，因此您需要转换其中之一。

上面，我已经将BossID转换为数字。如果你不需要那个，你可以这样做

if (mainItem[i]["BossId"] === id) arrayData.push(mainItem[i])
其它你可能感兴趣的问题
上一篇react-pdf 从磁盘加载文件但不加载 url 下一篇react-modal：如何关闭一个模态并同时打开一个新模态？