json - 本地 JSON 模式返回空
问题描述
我有一个本地 JSON 模式,我通过它过滤并通过某些Id
. 以下是 JSON 架构。
Users.json
[
{
"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"
}
]
在我的组件中,我正在导入 JSON 文件,然后是一种过滤并显示结果的方法。
到目前为止,我已经使用axios
,fetch
并componentDidMount
实现了我的目标。我的组件。
import React from "react";
import items from "../data/Users";
class OrgChartList extends React.Component {
constructor(props) {
super(props);
this.state = {
Users: []
};
}
render() {
const params = this.props.match.params.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);
}
return (
<div>{JSON.stringify(filterItemsBy(items, { BossId: params }))}</div>
);
}
}
export default OrgChartList;
如果我使用 JSON 对象作为 JavaScript 对象,它的工作原理就像
const items = [{}]
但是在导入它时返回空数组。
解决方案
如果您使用的是 CRA,您应该能够导入json
文件。如果不是,则需要json-loader
.
看起来您正在尝试通过id
附加到 url 来过滤用户列表。
使用 CRA 和您的数据文件,我能够很好地过滤: https ://codesandbox.io/s/4ry755y1rw
我敢打赌你的filterItemsBy
函数中发生了一些奇怪的事情
推荐阅读
- angular - 如何从扩展面板跳过标签顺序?
- angular - Angular 中的 *ng for 循环内的 *ng for 循环中是否可以有多个工具功能
- amazon-web-services - 如何通过项目的属性对 dynamodb 查询结果进行排序?
- flutter - Flutter 邮件程序正在发送重复的电子邮件,同时发送两封
- r - 如何在没有for循环的情况下获得相同的结果?
- ios - 通过声音和振动推送通知
- mysql - select 语句也可以查询除列之外的行吗?
- android - 在基本(应用程序)模块中显示来自动态功能模块的片段?
- javascript - 在 React 中使用不同结构的键/值对渲染 JSON
- python - 如何根据模式删除列中每个条目的最后一部分?