Radoslav Naidenov Radoslav Naidenov - 1 month ago 7
AngularJS Question

Redirect to new page after results are loaded

I am making a small web app that gets information about upcoming events, based on user input. I want to redirect the user to the results page as soon as the data is retrieved and stored in the local storage. Unfortunately, I am having trouble doing that as the user is redirected just before the content from the search is retrieved.

This is the service I am using to get the data from the API.

EventsService

app.service("EventsService", ["$http", function ($http) {

this.searchByCity = function (city) {
return $http.get("http://api.gigatools.com/city.json?cities[]=" + city + "&api_key=d924857077bc386767")
.then(function (response) {
return response.data[1];
})
}


this.searchByArtist = function (artist) {
return $http.get("http://api.gigatools.com//gigs.json?users[]=" + artist + "&api_key=d924857077bc386767")
.then(function (response) {
var allEvents = response.data[1];
var filteredEvents = [];
allEvents.forEach(function (singleEvent) {
if (singleEvent.event_owner === artist) {
filteredEvents.push(singleEvent);
}
})
return filteredEvents;
})
}

this.searchByVenue = function (venue) {
return $http.get("http://api.gigatools.com/venue.json?venues[]=" + venue + "&api_key=d924857077bc386767")
.then(function (response) {
return response.data[1];
})
}}])


This is the search function, that is executed when the user has entered his event preferences and clicked on the search button.

$scope.search = function (input) {

var searching = true;
switch ($scope.selected.id) {
case "city" :
console.log("Have to search by city.");
EventsService.searchByCity(input)
.then(function (events) {

$localStorage.results = events;
searching = false;
console.log($localStorage.results);


})
break;

case "artist" :
console.log("Have to search by artist.");
EventsService.searchByArtist(input)
.then(function (events) {
$scope.results = events;
})
break;

case "venue" :

console.log("Have to search by venue.");
EventsService.searchByVenue(input)
.then(function (events) {
$scope.results = events;
})
break;

}
if (searching === false) {
console.log("Finished.");
windows.location.href("views/ResultsPage.html");
}

}


The resultsPage controller :

var app = angular.module("resultsPage",['ngStorage','ngRoute']);

app.controller ("resultsCtrl",function ($scope,$localStorage) {


var loadResults = function () {
$scope.results = $localStorage.results;
console.log($localStorage.results);
}

loadResults();

})


I am not sure, if this code is enough. Let me know if I should share any other parts of the code.

Ali Ali
Answer

You are trying to switch from asyncronous context to sycnronous (using "searching" var). In most cases this method has problems.

Instead of it just continue with async flow, like this for example:

$scope.search = function (input) {

    var searching = true;
    switch ($scope.selected.id) {
        case "city" :
            console.log("Have to search by city.");
            EventsService.searchByCity(input)
                .then(saveEvents)
                .then(redirectToResultsPage)
            break;

        // ...
    }

    // if (searching === false) {
    //     console.log("Finished.");
    //     windows.location.href("views/ResultsPage.html");
    // }

}

function saveEvents(events) {
    $localStorage.results = events;
    searching = false;
    console.log($localStorage.results);
    return $q.when(events); // to chain promises
}

function redirectToResultsPage() {
    console.log("Finished.");
    windows.location.href("views/ResultsPage.html");
}