CODEWITHSUNDEEP
ajaxapireactjs
Manu
Manu

Reputation: 1662

Ajax call returns undefined

I am trying to make an API call and the following errors with Ajax not being a function:

import $ from 'jquery';

const apiCall = function () {
  var url = 'https://images.nasa.gov/#/search-results';

  var request = {
    q: 'sun',
    media_type: 'image'
  };

  var result = $.ajax({
    url: url,
    dataType: 'json',
    data: request,
    type: 'GET'
  })
  .done(function() {
    alert(JSON.stringify(result));
  })
  .fail(function() {
    alert('failed');
  })
}

module.exports = apiCall;

I am importing the above in another module and calling it on a button click in the react's render() function like:

import apiCall from './../api/apiCall';

class Gallery extends React.Component {
  render () {
    return (
      <section id="gallery" className="g-site-container gallery">
        <div className="grid grid--full">
          <div className="gallery__intro">
                <Button extraClass=""
                  type="button"
                  handleButtonClick={apiCall} />
          </div>
        </div>
      </section>
    )
  }
}

module.exports = Gallery;

Any thoughts with what am I doing wrong?

Upvotes: 0

Views: 520

Answers (2)

haotang
haotang

Reputation: 5698

First, ensure you're not using jquery-lite as it excludes ajax features.

Btw, it's not recommended to use both exports.module together with ES6's import / export. Try to just use one of them. Not pretty sure, but it may cause some module troubles that hard to understand.

Additionally, based on $.ajax official document, you have to process data in the callback

  $.ajax({
    url: url,
    dataType: 'json',
    data: request,
    type: 'GET'
  })
  .done(function(data) {
    // Process data provided from callback function
    alert(data);
  })
  .fail(function() {
    alert('failed');
  })

Personally I do prefer isomorphic-fetch to make ajax call in React application.

Upvotes: 1

Troy Alford
Troy Alford

Reputation: 27236

In my experience, this type of issue is most often because your transpilation is not working as you might expect - or you are transpiling your code while also using jquery (or any other lib) by including it with a CDN link. If this is the case, here's some info that might help you sort it out:

First, check that your transpiler is actually pulling jquery in. Just having it on the page won't necessarily allow this code to work - because when your transpiler operates on:

import $ from 'jquery'

It's going to expect to first load the jquery package from node_modules and then create an internal name for it, such as $_1 which will be used inside your bundle. If you intend to include jquery on the page via CDN, rather than bundling it in this fashion, you need to mark it as external in your webpack or rollup config. If using webpack, it would look something like:

{
  entry: '/path/to/your/application.js',
  externals: {
    'jquery': '$',
  }
}

This essentially tells webpack, "when I import from 'jquery', don't look in node_modules - instead, just assume jquery already exists on the page as window.$. Now, webpack won't attempt to include and bundle all of the jquery lib - and instead of creating $_1 it will actually honor what $ is.

If you do intend to load and bundle jquery as part of your build (not recommended, due to the incredible size-bloat it will entail) - I suggest ensuring that it's installed in node_modules. You can do this with:

npm install -S jquery

or, if you're using yarn:

yarn add jquery

Now, your import statement should load the lib correctly when you re-transpile.

Upvotes: 2

Related Questions