how to achieve json-p with react components

Question

I am trying to make a Wikipedia Viewer with React. But, I cannot make a normal ajax call to get data from Wikipedia API on my localhost due to cross origin issue. React also does not seem to accept jquery ($) for me to use jquery JSON-p. I also tried pure javascript way, but I am not sure if I was doing wrong way, it did not work either.

Could anyone tell me how I can make JSON-p call from react component to Wikipedia API?

Here is the jquery JSOP api call I used.

require jquery from 'jquery';

$.when($.ajax({ url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search="+searchTerm, dataType: 'jsonp' })) .then(function(result){ ...

UPDATE: Now I got jquery working in react. I used - import $ from 'jquery'. API call seems to be working. But, I cannot take the data out of the jquery json-p block. It does not recognize this.setState or any other function which is outside of this block. Below is my code so far:

import $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';
import Searchbar from './Searchbar';
import ListView from './ListView';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      term: ""
    };
  }

  searchWiki(term){
    $.when($.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search="+term,
      dataType: 'jsonp'
    }))
    .then(function(result){
      console.log(result);
      this.setState({term:term});
      });
  }


  render(){


    return(
      <div>
        <center>
          <h1>Wikipedia Viewer</h1>
          <Searchbar onSearchTermChange={this.searchWiki.bind(this)}/>
              <ListView term={this.state.term}/>
        </center>
      </div>
    )
  }
}

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

`it did not work` - what didn't? How did you try jsonp? jsonp is absolutely simple compared to xmlhttprequest, so, show what you did, and someone will show where you went wrong — Jaromanda X, Sep 07 '16 at 23:12
React itself does not have an ajax api. You will need to use an existing library - either importing jQuery or using a smaller http library like axios. Specific to react, making an initial ajax call should usually be done in the `componentDidMount` lifecycle method. — erik-sn, Sep 07 '16 at 23:53

score 0 · Answer 1 · answered Sep 08 '16 at 05:11

Yay! I managed to get a solution to this problem. For JSON-P jquery, I had to use ES6 syntax (result)=>{} for the 'then' call back function like this

import $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';
import Searchbar from './Searchbar';
import ListView from './ListView';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      term: "",
      searchResult: ""
    };
  }

  searchWiki(term){

    $.when($.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search="+term,
      dataType: 'jsonp'
    }))
    .then((result)=>{
        console.log(result[1]);

        this.setState({
          term: term,
          searchResult: result[1]
        });
      });



  }


  render(){


    return(
      <div>
        <center>
          <h1>Wikipedia Viewer</h1>
          <Searchbar onSearchTermChange={this.searchWiki.bind(this)}/>
          <ListView term={this.state.searchResult}/>
        </center>
      </div>
    )
  }
}

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

how to achieve json-p with react components

1 Answers1