Using React.js to render JSON

Question

I'm using react to create a frontend for my application in spring and i've used a manytomany relationship to may employees to shifts. When I run the localhost, the employeeID and name is returned but the shifts are left blank.

This is the Json Output:

{
"_embedded" : {
"employees" : [ {
  "employeeID" : "0001",
  "name" : "John Mitchell",
  "id" : 1,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/employees/1"
    },
    "employee" : {
      "href" : "http://localhost:8080/api/employees/1"
    },
    "shifts" : {
      "href" : "http://localhost:8080/api/employees/1/shifts"
    }
  }

}

{
"_embedded" : {
"shifts" : [ {
  "shifts" : "Sunday Evening",
  "id" : 1,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/1"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/1"
    }
  }
}, {
  "shifts" : "Monday Day",
  "id" : 2,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/2"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/2"
    }
  }
}, {
  "shifts" : "Tuesday Night",
  "id" : 3,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/3"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/3"
    }
  }
} ]

This is my react code:

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {employees: []};
}

componentDidMount() {
    client({method: 'GET', path: '/api/employees'}).then(response => {
        this.setState({employees: response.entity._embedded.employees});
    });
}

render() {
    return (
        <EmployeeList employees={this.state.employees}/>
    )
}

}

class EmployeeList extends React.Component{
render() {
    var employees = this.props.employees.map(employee =>
        <Employee key={employee._links.self.href} employee={employee}/>
    );
    return (
        <table>
            <tbody>
                <tr>
                    <th>Employee ID</th>
                    <th>Name</th>
                    <th>Shift</th>
                </tr>
                {employees}
            </tbody>
        </table>
    )
}

}

class Employee extends React.Component{
constructor(props) {
    super(props);
    this.state = {shifts:[]};
}
componentDidMount() {
    client({method: 'GET', path: '/api/employees._links.shifts.href'}).then(response => {
        this.setState({shifts: response.entity._embedded.shifts});
    });
}

render() {
    const shifts = this.state.shifts.map(shift =>
        <div key={shift.id}>{shift.shifts}</div>
    );

    return (
        <tr>
            <td>{this.props.employee.employeeID}</td>
            <td>{this.props.employee.name}</td>
            <td>{shifts}</td>
        </tr>
    )
}

}

ReactDOM.render(
<App />,
document.getElementById('react')

All I simply want to do is to return the shift (E.g: "shifts" : "Sunday Evening") for each employee when I run the localhost.

Any help would be greatly appreciated, thanks in advance.

EDIT

A 404 error is returned when trying to get shifts in the employee class

Dimitri Lavrenük · Accepted Answer · 2017-05-02 19:54:57Z

You have circular login in your Shift class, you want to render the Shift but in your render function more Shifts are created wich will then create more in the render function and so on. I don't see any need of the Shift class unless you want to reuse it or for estetic reasons.

class Employee extends React.Component{

    constructor() {
        // set the initial state of you will get an error in the render function
        this.state = { shifts: [] };
    }

    // load the shifts when the component is ready
    componentDidMount() {
        client({method: 'GET', path: this.props.employee._links.shift.href}).then(response => {
            this.setState({shifts: response.entity._embedded.shifts});
        });
    }

    render() {
        const shifts = this.state.shifts.map(shift =>
            <div key={shift.id}>{shift.shifts}</div>
        );

        return (
            <tr>
                <td>{this.props.employee.employeeID}</td>
                <td>{this.props.employee.name}</td>
                <td>{shifts}</td>
            </tr>
        )
    }
}

Collectives™ on Stack Overflow

Using React.js to render JSON

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related