6

I have a web app and an API inside a raspberry PI. The web app uses HTTP GET requisitions to the API to display its content

Now, inside the web app component.ts:

export class AppComponent implements OnInit {

    results = {};

    constructor(private http: HttpClient) {}
    ngOnInit(): void {

        var url = 'http://localhost:8000/api/';
        var endpoint = 'test/';

        this.http.get(url + endpoint).subscribe(data => {
          this.results = data['test'];
        })
    }
}

This works when I open the web app on a browser INSIDE the raspberry. However, when opening the web app from another device using the raspberry's IP and the port the app is running, I can't get the data from the API.

I assume it's because of the 'localhost', and once this rasp CANNOT BE SET WITH A STATIC IP I'd like to retrieve its local IP, to make something like: 

    ngOnInit(): void {

        var ip = <some code <-- HELP>
        var url = 'http://' + ip + ':8000/api/';
        var endpoint = 'test/';

        this.http.get(url + endpoint).subscribe(data => {
          this.results = data['test'];
        })
    }

And I've tested, if I put the IP manually in the code it works, though it was just for test, I don't want to input it manually.

Laura Martins
  • 583
  • 2
  • 6
  • 15

1 Answers1

13

You can get the origin by window.location.origin. For more details check here 

 ngOnInit(): void {

    var ip = window.location.origin // this will give you the ip:port
    //if you just want the ip or hostname you can use window.location.hostname
    var url =  ip + '/api/';
    var endpoint = 'test/';

    this.http.get(url + endpoint).subscribe(data => {
      this.results = data['test'];
    })
}
Laura Martins
  • 583
  • 2
  • 6
  • 15
Muhammad Usman
  • 10,039
  • 22
  • 39
  • 1
    That would be awesome if the port didn't come along with it. The API is running on port 8000, but I'll try to make it as a string and cut it short. Maybe that works? Thank you anyway :) – Laura Martins Nov 09 '17 at 19:21
  • 2
    well if you just want the `ip` or `hostname` I mean without the `port` you can use `window.location.hostname` – Muhammad Usman Nov 09 '17 at 20:01
  • you can see all the properties of `window.location` on the link I mentioned in the answer – Muhammad Usman Nov 09 '17 at 20:03
  • and don't forget to upvote and accept the answer if it helps :p – Muhammad Usman Nov 09 '17 at 20:04
  • I'm sorry I did not see that link! Really didn't, I don't even know why. I guess I was so tired it slipped by. I did use a workaround using string manipulation just to get it working and continue the project but I'll now implement the correct way :) thank you very very much. Have a wonderful day! – Laura Martins Nov 10 '17 at 02:32
  • I am running local.. i get error.. http://localhost:4444/api/test/ 404 (Not Found) – Ziggler Jun 04 '18 at 21:54
  • @GeorgeBailey, I get localhost, but not my actual IP address. How do I get my actual/network's IP address? – Artanis Zeratul Aug 20 '18 at 04:26
  • window.location.origin doesn't give the IP....This returns localhost:port in development environment and the hostname in production environment. – Julian Corrêa Oct 18 '18 at 21:46
  • @Ziggler, make sure you've defined the related end point on backend side – Muhammad Usman Oct 19 '18 at 11:36
  • @JulianCorrêa, yes you are right. That's what I've described above. – Muhammad Usman Oct 19 '18 at 11:37