[英]map array of objects with nested values and return
I am trying to map through array of objects with nested values and return it.我正在尝试使用嵌套值映射对象数组并返回它。
I am able to return tableheaderlist but not able to return the filtered sessions.我能够返回 tableheaderlist 但不能返回过滤的会话。 Am i missing something or going wrong somewhere?我是不是遗漏了什么或哪里出了问题?
Json杰森
hosts: "[{"HostName":"user28.abc.com",
"Count":2,
"Sessions":[{"StartTime":"00:04:30",
"LastUserActivity":"00:00:46",
"DisplayName":"N/A",
"UserName":"user28",
"Status":"Running",
"Visibility":false,
"Token":"8A2EB"},
{"StartTime":"00:03:43",
"LastUserActivity":"00:03:43",
"DisplayName":"N/A",
"UserName":"",
"Status":"Disconnected",
"Visibility":true,
"Token":"2EBXZY"}
]
},
{ "HostName":"user27.xyb.com",
"Count":2,
"Sessions":[
{"StartTime":"00:00:1",
"LastUserActivity":"00:00:00",
"DisplayName":"N/A",
"UserName":"user27",
"Status":"Running",
"Visibility":false,
"Token":"32C5C"},
{"StartTime":"00:00:06",
"LastUserActivity":"00:00:02",
"DisplayName":"N/A",
"UserName":"test2",
"Status":"Running",
"Visibility":false,
"Token":"A9D45"
}
]
}]
code:代码:
renderSessionInfo() {
let content = [];
if (!this.state.activeHosts) {
return null;
}
content =
this.state.activeHosts.map((hosts) => {
return (<div>
{renderHostDisabledInfo}
{this.renderTableHeaderList(hosts)}
{this.renderFilteredSessions(hosts)}
</div>);
});
return (<div>
{content}
</div>);
}
renderHostDisabledInfo(hosts) {
return (
<div id="hostDisabled">
<span className="sessionmanager__serverheader">{hosts.HostName}</span>
</div>
);
}
renderTableHeaderList(hosts) {
return (
<div>
<ul className="sessionmanager__table__header" >
<li className="sessionmanager__table__name">{Name}</li>
<li className="sessionmanager__table__application">{Application}</li>
<li className="sessionmanager__table__status">{Status}</li>
<li className="sessionmanager__table__duration">{Duration}</li>
<li className="sessionmanager__table__lastactivity">{LastActivity}</li>
</ul>
</div>
);
}
renderFilteredSessions(hosts) {
var filteredResult = [];
var toBeIgnoredResult = [];
if (!hosts.Sessions) {
return null;
}
hosts.Sessions.map((session) => {
if (session.Visibility == false) {
return filteredResult.push(session);
}
else
return toBeIgnoredResult.push(session);
})
if (filteredResult.length == 0) {
return (
<div className="session__table">
{res.noActiveSessions}
</div>
);
}
else {
filteredResult.map((session) => {
return (
<div>
<ul className="sessionmanager__table">
<li className="sessionmanager__table__name">{session.UserName}</li>
<li className="sessionmanager__table__application">{session.DisplayName}</li>
<li className="sessionmanager__table__status">{session.Status}</li>
<li className="sessionmanager__table__duration">{session.StartTime}</li>
<li className="sessionmanager__table__lastactivity">{session.LastUserActivity}</li>
{this.terminateButton(session.UserName)}
</ul>
</div>
);
});
}
}
Result expected: if Visibility is false, the session info(username,displayname,status,starttime and last user activity) should be displayed.预期结果:如果 Visibility 为 false,则应显示会话信息(用户名、显示名、状态、开始时间和上次用户活动)。
The problem here is you have implemented map function incorrectly.这里的问题是您错误地实现了地图功能。 renderFilteredSessions(hosts) should be returning filtered sessions, but its not returning anything. renderFilteredSessions(hosts) 应该返回过滤的会话,但它不返回任何内容。 Add a return in below section of code:在下面的代码部分添加一个返回:
return filteredResult.map((session) => {
return (
<div>
<ul className="sessionmanager__table">
<li className="sessionmanager__table__name">{session.UserName}</li>
<li className="sessionmanager__table__application">{session.DisplayName}</li>
<li className="sessionmanager__table__status">{session.Status}</li>
<li className="sessionmanager__table__duration">{session.StartTime}</li>
<li className="sessionmanager__table__lastactivity">{session.LastUserActivity}</li>
{this.terminateButton(session.UserName)}
</ul>
</div>
);
});
You can use filter in place of map.您可以使用过滤器代替地图。 Below is the method you can write in a better way:以下是您可以以更好的方式编写的方法:
renderFilteredSessions(hosts) {
if (!hosts.Sessions) {
return null;
}
/* Filter out only those Sessions where Visibility is true */
var filteredResult = hosts.Sessions.filter((session) => {
return session.Visibility === true; // or return !!session.Visibility;
});
if (filteredResult.length === 0) {
return (
<div className="session__table">
{res.noActiveSessions}
</div>
);
}
else {
return filteredResult.map((session) => {
return (
<div>
<ul className="sessionmanager__table">
<li className="sessionmanager__table__name">{session.UserName}</li>
<li className="sessionmanager__table__application">{session.DisplayName}</li>
<li className="sessionmanager__table__status">{session.Status}</li>
<li className="sessionmanager__table__duration">{session.StartTime}</li>
<li className="sessionmanager__table__lastactivity">{session.LastUserActivity}</li>
{this.terminateButton(session.UserName)}
</ul>
</div>
);
});
}
}
this.state.activeHosts.map(hosts=>hosts.Sessions.map(sessions=><li>sessions.Username</li>)
这是作为列表项的一般表示,根据您的需要使用它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.