map array of objects with nested values and return

Question

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. 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.

Answer 1

The problem here is you have implemented map function incorrectly. renderFilteredSessions(hosts) should be returning filtered sessions, but its not returning anything. 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>
        );
      });
    }
  }

Answer 2

this.state.activeHosts.map(hosts=>hosts.Sessions.map(sessions=><li>sessions.Username</li>)

这是作为列表项的一般表示，根据您的需要使用它