I need help creating a Restful API app

1

Hi,

I need help creating a Restful API app I’ve included the information here http://jsonplaceholder.typicode.com/ . Any suggestions how to code the API would appreciated.

Thanks

2

Are you trying to create an app that uses the API? If so, here is a tutorial using React (which I’m assuming you are using based on your earlier question) that can help you out: https://www.kirupa.com/react/working_with_external_data.htm

:billed_cap:

3

Yes I am trying to create an app that uses an api. I’m onto this tutorial, thanks.

1 Like
4

Hi Kirupa,

Following the tutorial you kindly posted me, I just have a quick question. Has anyone found this problem and if so I would be grateful for suggestions. When I run the code I get a undefined error:

./src/IPAddressContainer.js
Line 27: ‘componentDidMount’ is not defined no-undef
Line 39: ‘processRequest’ is not defined no-undef

Search for the keywords to learn more about each error.

But I have to to remove the {} from the code in order to avoid any errors in the script:

}

}

componentDidMount()
xhr = new XMLHttpRequest();
xhr.open(“GET”,“https://ipinfo.io/json”, true);
xhr.send();

   xhr.addEventListener("readystate", this.processRequest, false)

processRequest()
if (xhr.readyState === 4 && xhr.status === 220)
var response = JSON.parse(xhr.repsonseText);

5

You shouldn’t remove the { } from the code :slight_smile:

Can you post your full code for IPAddressContainer.js? Add the brackets back as well, for they are an important part of how JavaScript makes sense of the structure of your code.

1 Like
6

Here is the code for IPAdddress.js

import React, { Component } from "react";
import "./IPAddress.css";
import "./IPAddress.js";

var xhr; 

class IPAdressContainerr extends Component {
    construtor(props, context){
        super(props, context);



    

     this.state = {
         ip_address: ".."
     }; 
      
    


     this.processRequest = this.processRequest.bind(this);
    }

    }

   componentDidMount(){
       xhr = new XMLHttpRequest(); 
       xhr.open("GET","https://ipinfo.io/json", true); 
       xhr.send();

   
   
       xhr.addEventListener("readystate", this.processRequest, false)
   }
   
   

   processRequest(){
       if (xhr.readyState === 4 && xhr.status === 220)
           var response = JSON.parse(xhr.repsonseText); 

       
    render() {
        return(
    this.setState({
        ip_address: response.ip
    });

   }
   
   }
7

Hi Kiprua,
I wondered if you have had a chance to look through the code I posted, I would be really grateful for you help.
Thanks in advance,

8

Hey fast_developer - yes, I just looked at it. The biggest area is around ensuring brackets are in the right places. For example, you have an extra bracket right after the constructor function that closes your class declaration earlier than it needs to.

Take a look at the code for this in Github: https://github.com/kirupa/kirupa/blob/master/reactjs/external_data_ipaddress/src/IPAddressContainer.js

1 Like
9

Hi Kirupa,
Apologies for typing your name incorrectly and I would like to personally thank you for your most excellent and prompt help with this.
I will always return to your forum in the future for advice because it is the best advice I have come across on any Web Developer’s forums that I have tried in the past. Wishing you a good evening and thank you once more.
fast-developer
London, England

10

No problem at all haha. We are all here to help, so feel free to ask any questions - big or small :slight_smile: