Angular user JSON request from a static file

check this example:

.controller('NameOfYourController', function($scope, $http,  $timeout) {
    $scope.details = ""; // you can even omit the declaration here 
    $http.get("data.json").then(function(response){
        $scope.details = response.data;
        console.log($scope.details.username); // or response.data.username   
        $timeout(function () {
          // you get to the response obj using: response.data.your_object
          // $timeout logic goes here
        }, 1000);
    });
});

note: if you are inside a service you do not have a $scope

I'm not entirely sure why $scope is undefined from your example. You're most likely not injecting it like you are with $http or $timeout. Another possibility is that you are trying to use $scope in something other than a controller.

As for your second error, details is undefined since it is set after the .then() promise is resolved. You would want to move your $timeout logic into that block of code like this:

var details;
$http.get("data.json").then(function(response){
    $scope.details = response.data;
    // ADD YOUR $timeout LOGIC HERE SO DETAILS IS NOT UNDEFINED
});

Looking at the example , are You trying to put function for reading json file in Service method. If you are doing it then there is no $scope available in service. Hence you are getting below error

ReferenceError: $scope is not defined

In your code , there is local variable details is defined but not initialized. hence its value is undefined.

  var details;

and in timeout function you are trying to access details.username

username === details.username

hence you are getting below error

TypeError: Cannot read property 'username' of undefined

But if you want to do it most easiest way then just put your code in controller like below in this plunker. you should have creates data.json file to run below code.

'use strict';

angular.module('Authentication')

.controller('LoginController',
    ['$scope', '$rootScope', '$location', 'AuthenticationService','$http','$timeout',
    function ($scope, $rootScope, $location, AuthenticationService,$http,$timeout) {
        // reset login status
        AuthenticationService.ClearCredentials();
         var details;
        $http.get("data.json").then(function(response){
        $scope.details = response.data;
        //alert($scope.details.username);
        });

       function Login(username,password,callback){
            $timeout(function(){
                var response = { success: username === $scope.details.username && password === $scope.details.password };
                if(!response.success) {
                    response.message = 'Username or password is incorrect';
                }
                callback(response);
            }, 1000);
       }

        $scope.login = function () {
            $scope.dataLoading = true;
            Login($scope.username, $scope.password, function(response) {
                if(response.success) {
                    AuthenticationService.SetCredentials($scope.username, $scope.password);
                    $location.path('/');
                } else {
                    $scope.error = response.message;
                    $scope.dataLoading = false;
                }
            });
        };
    }]);

But if you want to go with same controller and make changes in service then find answer by @blackmiaool which is absolutely perfect.

What is the esiest way to achieve what I am trying to do? Extract the username and password from a json file and not have them as a static string?

The first approach is most easiest approach but it is not a standard practice.

The second approach is correct and standard approach for what you are trying to do.

Observations based on the below errors :

1. ReferenceError: $scope is not defined

• This error comes when we are trying to access the $scope object but forgot to inject as a dependency into the controller.

  app.controller('MyCtrl', ['$scope', function ($scope) { ... }
  

2. TypeError: Cannot read property 'username' of undefined

• What is username in your code ?
• You should use $scope.details.username instead of only username.

Your code should be formatted like this :

angular.module('myApp',[]).controller('LoginController',['$scope', function ($scope) {
    var details;
    $http.get("data.json").then(function(response){
        $scope.details = response.data;
        console.log($scope.details.username);
    });

    $timeout(function () {
        var response = { success: username === $scope.details.username && password === $scope.details.password 
        if (!response.success) {
            response.message = 'Username or password is incorrect';
        }
        callback(response);
    }, 1000);        
}]);