ReactJS mapping to API

Question

import React, { Component } from 'react';
import axios from 'axios';

class Meetups extends Component {

  constructor(props) {
    super(props);
    console.log('in constructor');
    this.state = {
      results: [],
    };
  }

 componentDidMount() {
  console.log('meetup feed');
   axios.get('https://api.meetup.com/2/categories?offset=0&format=json&photo-host=public&page=20&order=shortname&desc=false&sig_id=211627025&sig=ae69aec13f23c7837cd55c5a68b99e00719fa225')
  //response
  .then(response => response.json())
  .then(data => this.setState({results:data.results}));
 }
  render() {
    const {results} =this.state;
    return(
      <div>
      {results.map(result =>
        <div key={result.id} className='container'>
            {result.name}
        </div>
      )}
    </div>
     );
    }
}

export default Meetups;

JSON format which I'm receiving:

{
    "results": [
        {
            "name": "Arts & Culture",
            "sort_name": "Arts & Culture",
            "id": 1,
            "shortname": "Arts"
        },
        {
            "name": "Book Clubs",
            "sort_name": "Book Clubs",
            "id": 18,
            "shortname": "Book Clubs"
        },
        {
            "name": "Career & Business",
            "sort_name": "Career & Business",
            "id": 2,
            "shortname": "Business"
        }
]
}

I am trying to use Meetup API in my project. But could not able to connect with it. There might be a problem with mapping. I want to know exact mapping for the given json format. Please help me out. Thanks

is `axios.get(..)` throwing an exception? Try and add a `.catch(..)` handler after `.then(data => this.setState({results:data.results}))` and see if it is invoked. - in other words, there is a chance `setState(...)` is not being called here. — Dacre Denny, Jun 10 '18 at 20:30
Failed to load https://api.meetup.com/2/categories?offset=0&format=json&photo-host=public&page=20&order=shortname&desc=false&sig_id=211627025&sig=ae69aec13f23c7837cd55c5a68b99e00719fa225: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. — Vamshi Rajarikam, Jun 10 '18 at 20:39
As described is the [meetup api](https://www.meetup.com/meetup_api/) `The Meetup API supports the CORS specification which allows browser clients hosted on a domain other than api.meetup.com to communicate directly with the API. The API uses OAuth consumer redirect uris to validate a request's origin, so you must be using OAuth to benefit from CORS.` SO basicaly you need to be authorized or use JSONP — lomboboo, Jun 10 '18 at 20:47
[Here](https://www.meetup.com/meetup_api/auth/#keys) you find info about authorization — lomboboo, Jun 10 '18 at 20:49
The URL which I used does not need any OAuth. We can directly retrieve the data using the URL. You can check copy & paste the URL. — Vamshi Rajarikam, Jun 10 '18 at 20:51
Read the documentation again. The URL you are using is the returned and the signed one not the requested API route itself. So, read the documentation again, get the key and use it properly. — devserkan, Jun 10 '18 at 21:07
@VamshiRajarikam code is perfectly fine. You copy and paste it in the url and get response because you requesting it from `api.meetup.com` and when you do it from your application - domain is different `htpp://your-app.com` for example. That is why you get the error. From what I can see you do not know much about CORS. Please read this [question/answer](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) and you will have better understanding. — lomboboo, Jun 10 '18 at 21:20
I have passed CORS. Even now I'm still getting the error. Meetups.js:18 Uncaught (in promise) TypeError: response.json is not a function at Meetups.js:18. — Vamshi Rajarikam, Jun 11 '18 at 18:06

score -1 · Answer 1 · answered Jun 11 '18 at 23:55

import React, { Component } from 'react';
import axios from 'axios';

class Meetups extends Component {

  state = {
    results: []
}
componentDidMount() {
    axios.get('https://api.meetup.com/2/categories?offset=0&format=json&photo-host=public&page=20&order=shortname&desc=false&sig_id=211627025&sig=ae69aec13f23c7837cd55c5a68b99e00719fa225')
        .then(response => {
            let results = response.data.results;
            this.setState({ results: results });
            console.log(response);
        })

}
render() {
    let studentsDisplay = (
        this.state.results.map( (result, index) =>  
        <div  key={index} className="card" style= { {width: '18rem'} }>
            {result.name}
            <br/>
            {result.shortname}
        </div>

    ));
    return (
        <div className='container'>
            {
                studentsDisplay     
            }
        </div>
    );
}
}

export default Meetups;

An explanation on the above code would be useful, rather than just the code itself — n8udd, Feb 14 '19 at 15:47

ReactJS mapping to API

1 Answers1