Get info from API request with parameters ReactJS

Question

I'm trying to get information from the API based on information I'm sending it, but having two problems:

I hard coded the info sent to the API (year and term) since it is supposed to return the information I'm attempting to store, and it doesn't work
I'm trying to use it as a function, to then populate the table, but it keeps giving me an error due to it not being able to get the info in the first place, so I'm guessing the problem is with the way I'm requesting info from the API (I'm new to the whole React/JavaScript thing)

this is sort of what my code looks like

class Stu extends Component {
  constructor(props) {
    super(props);

    this.state = {
      students: [],
    }
    this.fetch = this.fetch.bind(this)
    this.getStudents = this.getStudents.bind(this)
  }

  getStudents(year, term) {
    return this.fetch(`http://10.123.456.321/Stu/`, {
        method: 'POST',
        body: JSON.stringify({
            year,
            term
        })
    }).then(data => {
      this.setState({
        students: data.results.map(item => ({
          firstName: item.firstName,
          lastName: item.lastName,
          ID: item.ID,
          term: item.term,
          year: item.year,
        }))

      })
      console.log(this.state);
    })
  }

  fetch(url, options) {
    // performs api calls sending the required authentication headers
    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }

    return fetch(url, {
        headers,
        ...options
    })
        .then(response => response.json())
  }

  renderTableData() {
    return this.state.projects.map((student, index) => {
       const { firstName, lastName, ID, term, year } = student
       return (
          <tr>
             <td>{firstName}</td>
             <td>{lastName}</td>
             <td>{ID}</td>
             <td>{term}</td>
             <td>{year}</td>
          </tr>
       )
    })
  }
// 

  render() {
    return (
      <Container>
        {this.getStudents("2019", "summer")} // this is supposed to be called from a button click, but I tried hardcoding those values and it doesn't call the API properly, both values are strings
        <Form>
          <div>
          <table id='students'>
               <tbody>
               <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>ID</th>
                <th>Term</th>
                <th>Year</th>
               </tr>
               {this.renderTableData()}
               </tbody>
            </table>
          </div>
        </Form> 
      </Container>
    );
  }
}

export default Stu;

SiddAjmera · Accepted Answer · 2019-07-17 01:24:37Z

2

I think the issue is with the way you're calling getStudents. I think your API is supposed to accept the request payload as application/json. But by stringifying it, you're sending it as string. Hence the issue.

Get rid of the JSON.stringify call and try if it works:

getStudents(year, term) {
  return this.fetch(`http://10.123.456.321/Stu/`, {
    method: 'POST',
    body: {
      year,
      term
    }
  }).then(data => {
    this.setState({
      students: data.results.map(item => ({
        firstName: item.firstName,
        lastName: item.lastName,
        ID: item.ID,
        term: item.term,
        year: item.year,
      }))

    })
    console.log(this.state);
  })
}

There could be other issues too. It would be great if you could share a minimal CodeSandbox Sample to work with so that someone out here could have a look.

answered Jul 17, 2019 at 1:24

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get info from API request with parameters ReactJS

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