How do I display this json data with reactjs on my HTML page

Question

I am very new to web design (literally no prior knowledge) and is currently trying to create a website which pulls data from my MySQL database using Nodejs and display it on my HTML page with Reactjs. Any help would be highly appreciated

I previously copied the code from how to display json data with ReactJs in the table, but when I used my URL from my localhost server with the JSON data in it it just shows me the error "TypeError: this.state.data.map is not a function".

this is my app.js

class App extends React.Component {
    constructor(){
      super() 
        this.state = {
          data: []
        }

    }
    componentDidMount() {
      $.ajax({
         url: "http://localhost:4000/stockin",
         type: "GET",
         dataType: 'json',
         ContentType: 'application/json',
         success: function(data) {

           this.setState({data: data});
         }.bind(this),
         error: function(jqXHR) {
           console.log(jqXHR);
         }.bind(this)
      })
    }
    render() {


      return (
        <table>
        <tbody>{this.state.data.map(function(item, key) {

                 return (
                    <tr key = {key}>
                        <td>{item.No}</td>
                        <td>{item.Stocktype}</td>
                        <td>{item.Binid}</td>
                        <td>{item.Stockid}</td>
                    </tr>
                  )

               })}</tbody>
         </table>
      )
    }
  }

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

And this is my json data

{"stockin":[{"No":1,"Stocktype":"XM21","Binid":"1234124","Stockid":"135215215","Datestockin":"2019-05-05T16:00:00.000Z","Quantity":52,"Remarks":"Good stock"},
{"No":2,"Stocktype":"XM22","Binid":"2352342","Stockid":"123456721","Datestockin":"2019-05-05T16:00:00.000Z","Quantity":21,"Remarks":"Good stock"},
{"No":3,"Stocktype":"screw","Binid":"2432342","Stockid":"123456721","Datestockin":"2019-05-05T16:00:00.000Z","Quantity":23,"Remarks":"Good stock"},
{"No":4,"Stocktype":"screw","Binid":"1325123","Stockid":"242353223","Datestockin":"2019-04-30T16:00:00.000Z","Quantity":32,"Remarks":"Screws for bins"}]}

I wish to be able to display the data in a table form on my HTML website in the end.

Your response data is not an array directly. You'll probably have to do `this.setState({ data: data.stockin })` — maazadeeb, May 13 '19 at 06:58
Exactly, and also is not recommendable using jquery with react, you can try to do the same with axios — ProblemsEverywhere, May 13 '19 at 07:02
@MaazSyedAdeeb Thank you so much for that, I did what you said and now its working perfecttly! Thank you — user7545349, May 13 '19 at 07:18

score 1 · Answer 1 · answered May 13 '19 at 06:58

May be the issue is initially the data is empty so what you have to so is check the length of data like

{this.state.data.length  == 0 && <div>No data found</div>} 
{this.state.data.length > 0 && 
 <table>
    <tbody>{this.state.data.map(function(item, key) {

             return (
                <tr key = {key}>
                    <td>{item.No}</td>
                    <td>{item.Stocktype}</td>
                    <td>{item.Binid}</td>
                    <td>{item.Stockid}</td>
                </tr>
              )

           })}</tbody>
     </table>
  }

score 1 · Accepted Answer · answered May 13 '19 at 07:09

1

try to change like below in your code

success: function(data) {
             this.setState({data: data.stockin});
         }.bind(this),

then it will work correctly at all times

Hope this helps.

answered May 13 '19 at 07:09

VISWANATH K

126
2

Ladi Adenusi · Answer 3 · 2019-05-13T07:07:11.877

You need to call .map on data.stockin instead.

      return (
        <table>
        <tbody>{this.state.data.stockin.map(function(item, key) {

                 return (
                    <tr key = {key}>
                        <td>{item.No}</td>
                        <td>{item.Stocktype}</td>
                        <td>{item.Binid}</td>
                        <td>{item.Stockid}</td>
                    </tr>
                  )

               })}</tbody>
         </table>

But instead of doing that, in your componentDidMount, you can do this in the success callback...

this.setState({data: data.stockin});

By doing this, you're getting rid of a possible error in your render method when checking for this.state.data.stockin.map, as this.state.data is could be empty at the time of the call.

How do I display this json data with reactjs on my HTML page

3 Answers3