0

This may be a silly question and I am very new to NativeScript. I have a sample project up. Trying to do a simple get request to a local api. This is a website setup on my local dev machine for:

http://test-api.dev/api/v1

I am trying to access an endpoint on my local API and it does not seem to return ANYTHING. But I can change the API endpoint to something that is not a local API and sometimes it return stuff.

The API is a Laravel/PHP api and I can confirm it is infact returning valid json, so I don't think the API is the problem. Here is my file.

var config = require("../../shared/config");
var fetchModule = require("fetch");
//var http = require("http");
var ObservableArray = require("data/observable-array").ObservableArray;

function GroceryListViewModel(items) {
    var viewModel = new ObservableArray(items);
    viewModel.load = function() {
        // http.getJSON(config.apiUrl + "events").then(function(result) {
        //  console.log(JSON.stringify(result));
        // }, function(error) {
        //  console.error(JSON.stringify(error));
        // });

        return fetch(config.apiUrl + "events", {
                headers: {
                    //"Authorization": "Bearer " + config.token
                    "Content-Type": "application/json"
                }
            })
            .then(handleErrors)
            .then(function(response) {
                console.log(response);
                return response.json();
            }).then(function(data) {
                console.dump(data);
                data.forEach(function(event) {
                    viewModel.push({
                        name: event.name,
                        id: event.id
                    });
                });
            });
    };

    viewModel.empty = function() {

        while (viewModel.length) {
            viewModel.pop();
        }
    };
    return viewModel;
}

function handleErrors(response) {
    if (!response.ok) {
        console.log(JSON.stringify(response));
        throw Error(response.statusText);
    }
    return response;
}

module.exports = GroceryListViewModel;

Please go easy on me, definitely seeking help on this though. Thank you all in advance.

devcflynn
  • 1
  • 4

2 Answers2

0

return fetch(config.apiUrl + "events", { - so the fetch request is expecting the first argument to be a URL. So where config.apiUrl is defined is where the request goes. You can change this to point to the localhost instance of your server you are running.

Brad Martin
  • 5,637
  • 4
  • 28
  • 44
  • Yes. It is set properly and it points to the correct local api endpoint. The data returns a valid JSON object as well. For some reason, there is nothing showing in those log statements. If I change it to an external api like the ones in the guide, it works fine. – devcflynn Apr 01 '17 at 01:06
  • I wasn't sure if there is something port related on my machine. I am running a LEMP env as well on an Unbuntu 16.04 machine. – devcflynn Apr 01 '17 at 01:08
  • If it's returning data then all should be okay. Can you add the output you do see when this runs? – Brad Martin Apr 01 '17 at 02:26
  • I would, but it is not outputting anything in console with the above code. Change the URL to something different, like the examples, then stuff shows. Point it back to my local endpoint, then it doesnt work again. If change it to any local endpoints, they return nothing. I guess my question is, does this support api development in this manner, or am I doing something wrong. Perhaps a config issue? – devcflynn Apr 01 '17 at 15:54
  • First, you sure your local server is running? Second, what's it supposed to return? You can develop against local servers just fine. My guess is if the code runs and no errors are thrown then you aren't returning data or you are hitting the wrong endpoint – Brad Martin Apr 01 '17 at 17:06
  • Yes, the local server is running 100%. Just to let you know, I am primarily a web developer, so the API and endpoints are all setup properly I promise :). The problem seems to be that the console logs in the promise statements in the above code are not outputting my responses though. From all the tutorials, it looks like it should be. But console.log and console.dump does not output my json response. If there is nothing much else I can do, then I will continue to debug – devcflynn Apr 03 '17 at 15:12
0

So I have found the issue, thought I would post it. The problem wasn't my endpoints or my NS install. It is because Android Emulators out of the box cannot reference local sites running on your dev machine without some modification to the hosts settings on the Emulator. This process is explained here but I want to emphasize for anyone having the same issue.

Android emulators do not support access to local machine sites out of the box as explained here: https://developer.android.com/studio/run/emulator-networking.html

It needs to be setup through the device EVERYTIME unless someone has a solution to set this up only once, I would love to see it shared here.

There are serveral solutions outlining similar steps but I have had issues on every single one. Here is one that outlines the gist of the issue: http://sadhanasiblog.blogspot.in/2012/07/local-environment-setup-for-android.html

Thanks for the help.

devcflynn
  • 1
  • 4