Calling a REST webservice from ReactJS

Question

I was trying to call a REST webservice to fetch data from the database and return a JSON object back to the ReactJS app.When I access the URL from the browser it displays the JSON object but when I try to render the data in the table no content is displayed.

My sample code looks like

import React from 'react';
import $ from 'jquery'; 

export default class Members extends React.Component {
  constructor(props) {
    super(props);
    this.state = { users: [] };
  }

  componentDidMount() {
    $.ajax({
      url: "http://localhost:8080/users"
    }).then(function(data) {
        this.setState({
                    users:data
        });
    });
    }
  render() {
    return (
     <UsersList users={this.state.users}/>
    )
  }
}

class UsersList extends React.Component {
    render() {
        var users = this.props.users.map(users =>
            <User key={user._links.self.href} user={user}/>
        );
        return (
            <table>
                <tbody>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                    {users}
                </tbody>
            </table>
        )
    }
}
class User extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.user.firstName}</td>
                <td>{this.props.user.lastName}</td>
            </tr>
        )
    }
}

Is this a problem of asynchronous loading ?

can you please console the data in the componentDidMount?what is the data? — user5738822
– user5738822, Commented Oct 10, 2016 at 6:15
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:8080/users. (Reason: CORS header 'Access-Control-Allow-Origin' missing). This is the console output — harshal1889
– harshal1889, Commented Oct 10, 2016 at 6:20
which server side language are you using? if it is nodejs and express use npmjs.org/package/cors package — Lionel Dcosta
– Lionel Dcosta, Commented Oct 10, 2016 at 6:36

harshal1889 · Accepted Answer · 2016-10-10 08:39:41Z

1

@Alireza: Thanks for the help. I'm able to fetch the JSON object from the service which currently looks like

{
  "_embedded" : {
    "users" : [ {
      "firstName" : "Harshal",
      "lastName" : "Patil",
      "location" : "ABC",
      "userId" : "USR_1",
      "_links" : {
        "self" : {
          "href" : "#urlLink"
        },
        "user" : {
          "href" : "#urlLink"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "#urlLink"
    },
    "profile" : {
      "href" : "#urlLink"
    }
  }
}

I have used Spring Data Rest for web service implementation and understand that the hypermedia headers(HAL) are included in the json object.Is there any way to ignore these header data while rendering in the react app? Currently the JSON object throws an error at line 2 while parsing.

edited Oct 10, 2016 at 8:39

answered Oct 10, 2016 at 8:33

harshal1889

311 gold badge1 silver badge5 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:00:40Z

According to this question JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. JSONP takes advantage of the fact that browsers do not enforce the same-origin policy on script tags. Note that for JSONP to work, a server must know how to reply with JSONP-formatted results. JSONP does not work with JSON-formatted results.Try to use JSONP in your Ajax call. It will bypass the Same Origin Policy.like this :

  componentDidMount() {
    $.ajax({
      url: "http://localhost:8080/users",
      async:true,
      dataType : 'jsonp'   //you may use jsonp for cross origin request
      crossDomain:true,
    }).then(function(data) {
        this.setState({
                    users:data
        });
    });
    }

Good answer on stackoverflow: jQuery AJAX cross domain

deepthought · Accepted Answer · 2017-07-23 21:23:54Z

0

Probably this may be late, but I see an issue with the variable reference to items in your user map method.

Here is your code

class UsersList extends React.Component {
  render() {
    var users = this.props.users.map(users =>
   <User key={user._links.self.href} user={user}/>
);

...

it probably should be

class UsersList extends React.Component {
  render() {
    var users = this.props.users.map(user =>
   <User key={user._links.self.href} user={user}/>
);

...

Note the change in the name of variable in map function from "users" to "user".

answered Jul 23, 2017 at 21:23

deepthought

8711 bronze badges

Collectives™ on Stack Overflow

Calling a REST webservice from ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related