[英]filter JSON result by attribute if the obj. attribute is true with React.js
Im trying to retrieve and filter JSON data with React.js and maybe hooks but I cant come with any good way to do it.我试图用 React.js 和钩子来检索和过滤 JSON 数据,但我无法找到任何好的方法来做到这一点。 Just now I have my JSON data local, so it does not come from restAPI or similar (for now)... and what Im trying is to create a menu with buttons that when I click on them I get filtered data.
刚才我在本地有我的 JSON 数据,所以它不是来自 restAPI 或类似的(目前)......我试图创建一个带有按钮的菜单,当我点击它们时,我会得到过滤的数据。 I know... it should not be very difficut to do it (cause Im doing it already in a veeeery basic way for a conditional that show different icones depending on if certain attribute is true.) but anyway im struggling with it.
我知道......这样做应该不是很困难(因为我已经以一种非常基本的方式为条件做了它,根据某些属性是否为真显示不同的图标。)但无论如何我都在努力解决它。
Here is my code:这是我的代码:
import React, {setState, useState} from 'react';
export const ByCourse = () => {
const projects = window.projects.aaData;
console.log('window.projects = ', projects);
return (
<div className="section-component">
<h2 className="mt-2 mb-4">By Course</h2>
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link active" href="#">
All
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Favorite
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Recent
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Assigned
</a>
</li>
</ul>
<div className="container">
{projects.map(project => {
return(
<div className="row">
<div className="w-100">
<div className="d-flex border mt-1 mb-1 p-3">
<div className="col-1">
{project.favorite ? <i className="fa fa-star"></i> : <i className="fa fa-star-o"></i>}
</div>
<div className="col-11">
<div className="font-weight-bold"> {project.projectTitle}</div>
<div className="font-weight-normal"> {project.ouName}</div>
</div>
</div>
</div>
</div>
)})}
</div>
</div>
);};
and my data looks like this:我的数据如下所示:
projects = {"aaData":
[
{
"index":0,
"projectTitle":"123",
"userTitle":"VVS-teknik grund",
"ouName":"fertest1",
"orgUnitId":1022,
"projectId":2014,
"favorite":false,
"recent":false,
"userAssigned":false,
"projectStatus":"ACTIVE",
"viewLink":"http://xxxxxx
},
{
"index":1,
"projectTitle":"AAA",
"userTitle":"AAA",
"ouName":"fertest1",
"orgUnitId":1022,
"projectId":2002,
"favorite":false,
"recent":true,
"userAssigned":false,
"projectStatus":"ACTIVE",
"viewLink":"http://xxxxxx
},
{
"index":2,
"projectTitle":"Activity with image and text",
"userTitle":"asdas",
"ouName":"ferfer AB",
"orgUnitId":1004,
"projectId":1892,
"favorite":false,
"recent":false,
"userAssigned":true,
"projectStatus":"NEW",
"viewLink":"http://xxxxxx"
}]
I tried using a solution from here: Filtering JSON results in categories - React Hooks but I get a WEBPACK_1 ERROR and cant fix it...我尝试使用这里的解决方案: 按类别过滤 JSON 结果 - React Hooks但我收到 WEBPACK_1 错误并且无法修复它...
Im also doing a very basic filtering here:我也在这里做了一个非常基本的过滤:
{project.favorite ? <i className="fa fa-star"></i> : <i className="fa fa-star-o"></i>}
and basically what Im looking for is:基本上我要找的是:
if attribute "favorite" is true -> show results with attr favorite true else if attribute "recent" is true -> just show results with attribute recent == true Thank you very much in advance, any help will be very very welcome.如果属性“favorite”为真 -> 显示带有 attr 最喜欢的结果为真否则如果属性“最近”为真 -> 只显示带有属性最近的结果 == 真 非常感谢您,任何帮助将非常受欢迎。
First of all, the filtering or those functions is not about React.js.首先,过滤或那些功能与 React.js 无关。 It's about JavaScript.
它是关于 JavaScript 的。
I will try go to be honest, i don't undestand anything about your problem.我会尽量去说实话,我不了解你的问题。 Could you please write only your problem?
你能只写你的问题吗?
Note: Don't mix the conditional keyword or something like that.注意:不要混合使用条件关键字或类似的东西。 If you write the problem clearly we will (i) will help you.
如果您把问题写清楚,我们将 (i) 帮助您。 Bonus: I refactor your code.
奖励:我重构了你的代码。
Here changes list: 1- I removed the unnecessary import 2- Seperate your code.此处更改列表: 1- 我删除了不必要的导入 2- 分离您的代码。 Make component.
制作组件。 3- Indentation 4- Short condition (Fix for duplicate code)
3- 缩进 4- 短条件(修复重复代码)
import React from 'react';
const Project = data => (
<div className="row">
<div className="w-100">
<div className="d-flex border mt-1 mb-1 p-3">
<div className="col-1">
<i className={data.favorite ? "fa fa-star" : "fa fa-star-o"} />
</div>
<div className="col-11">
<div className="font-weight-bold"> {data.projectTitle}</div>
<div className="font-weight-normal"> {data.ouName}</div>
</div>
</div>
</div>
</div>
);
export const ByCourse = () => {
const projects = window.projects.aaData;
console.log('window.projects = ', projects);
return (
<div className="section-component">
<h2 className="mt-2 mb-4">By Course</h2>
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link active" href="#">
All
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Favorite
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Recent
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Assigned
</a>
</li>
</ul>
<div className="container">
{projects.map(project => <Project data={project} />)}
</div>
</div>
);
};
Here's a working example using useState
to set a filter:这是一个使用
useState
设置过滤器的工作示例:
https://codesandbox.io/s/crazy-turing-jd3ym?fontsize=14&hidenavigation=1&theme=dark https://codesandbox.io/s/crazy-turing-jd3ym?fontsize=14&hidenavigation=1&theme=dark
I am assuming you want to show the objects where favorite OR recent: true
,我假设您想显示
favorite OR recent: true
的对象favorite OR recent: true
,
1) A simple way to do this is: 1) 一个简单的方法是:
let projects = { "aaData": [{ "index": 0, "projectTitle": "123", "userTitle": "VVS-teknik grund", "ouName": "fertest1", "orgUnitId": 1022, "projectId": 2014, "favorite": true, "recent": false, "userAssigned": false, "projectStatus": "ACTIVE", "viewLink": "http://xxxxxx" }, { "index": 1, "projectTitle": "AAA", "userTitle": "AAA", "ouName": "fertest1", "orgUnitId": 1022, "projectId": 2002, "favorite": false, "recent": true, "userAssigned": false, "projectStatus": "ACTIVE", "viewLink": "http://xxxxxx" }, { "index": 2, "projectTitle": "Activity with image and text", "userTitle": "asdas", "ouName": "ferfer AB", "orgUnitId": 1004, "projectId": 1892, "favorite": false, "recent": false, "userAssigned": true, "projectStatus": "NEW", "viewLink": "http://xxxxxx" } ] } for (let iterator = 0; iterator < projects.aaData.length; iterator++) { if (projects.aaData[iterator].favorite || projects.aaData[iterator].recent) { console.log(projects.aaData[iterator]) } else { continue; } }
2) Other way to do this is: 2)其他方法是:
let projects = { "aaData": [{ "index": 0, "projectTitle": "123", "userTitle": "VVS-teknik grund", "ouName": "fertest1", "orgUnitId": 1022, "projectId": 2014, "favorite": true, "recent": false, "userAssigned": false, "projectStatus": "ACTIVE", "viewLink": "http://xxxxxx" }, { "index": 1, "projectTitle": "AAA", "userTitle": "AAA", "ouName": "fertest1", "orgUnitId": 1022, "projectId": 2002, "favorite": false, "recent": true, "userAssigned": false, "projectStatus": "ACTIVE", "viewLink": "http://xxxxxx" }, { "index": 2, "projectTitle": "Activity with image and text", "userTitle": "asdas", "ouName": "ferfer AB", "orgUnitId": 1004, "projectId": 1892, "favorite": false, "recent": false, "userAssigned": true, "projectStatus": "NEW", "viewLink": "http://xxxxxx" } ] } let filteredArrayWithNull = projects.aaData.filter((object) => { return object.favorite || object.recent ? object : null }) let finalFilteredArray = filteredArrayWithNull.filter((object) => object!=null) console.log(finalFilteredArray);
To read more about filter()
;阅读更多关于
filter()
; here is a comprehensive guide这是一份综合指南
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.