Extracting precise information from a JSON file using Angular's $http.get

Question

Extracting precise information from a JSON file using Angular's $http.get

I am struggling with extracting a specific user from a JSON file containing a user list and displaying it on an Angular index page. Despite extensive research, I have been unable to find a satisfactory solution. The user list must remain in a JSON file instead of a JS file.

sampleApp.controller('userInfo', ['$scope', '$http', '$log', '$filter',  function($scope, $http, $log,$filter) {
$scope.results = '';

$http.defaults.headers.common['X-Custom-Header'] = 'Angular.js';

$http.get('data/registered-user-list.json').
    success(function(data, status, headers, config) {
        $scope.results = data;
    })
    .error(function(data, status, headers, config) {
        // log error
    });
}]);

The JSON file:

{ "results": [
{
  "usernumber": "1",
  "userid": "manojsoni",
  "userpassword": "password",
  "useremail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2dfd3dcddd8c1dddcdb9cdddcdedbdcd7f2d5dfd3dbde9cd1dddf">[email protected]</a>",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
},
{
  "usernumber": "2",
  "userid": "jasmeet",
  "userpassword": "password",
  "useremail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="046e657769616170446a65636576766b2a676b69">[email protected]</a>",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
},
{
  "usernumber": "3",
  "userid": "manoj30dec",
  "userpassword": "password",
  "useremail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066b6768696c286d736b677446686761677474692865696b">[email protected]</a>",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
},
{
  "usernumber": "4",
  "userid": "lavish",
  "userpassword": "password",
  "useremail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f232e39263c27613c272e3d222e0f212e282e3d3d20612c2022">[email protected]</a>",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
}    
]}

javascript angularjs json

Answer 1

Answer №1

$http.get('data.json'). //json file path
        success(function(data, status, headers, config) {
            alert("Success");
           $scope.resutls = data;
        }).
        error(function(data, status, headers, config) {
            alert("Error");
          // log error
        });

Check out my response to a similar question here

Accessing and displaying JSON data via Http Get request

Lastly, iterate through the results to extract the desired information.

Answer 2

$http.get('data.json'). //json file path
        success(function(data, status, headers, config) {
            alert("Success");
           $scope.resutls = data;
        }).
        error(function(data, status, headers, config) {
            alert("Error");
          // log error
        });

Check out my response to a similar question here

Accessing and displaying JSON data via Http Get request

Lastly, iterate through the results to extract the desired information.

Answer 3

Answer №2

Please specify the criteria for filtering the user.

Caution! The use of success and error with $http is outdated, replace with then instead!

Deprecation Notice

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

// I will update this function once more details are provided
var getData = function(users){
  for(var i in users{
    if(users[i]["theFieldYouWant"] == theValueYouWant){
        return users[i];
    }   
  }
}

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.results = getData(response);
        },
        function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        }
    );

Answer 4

Please specify the criteria for filtering the user.

Caution! The use of success and error with $http is outdated, replace with then instead!

Deprecation Notice

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

// I will update this function once more details are provided
var getData = function(users){
  for(var i in users{
    if(users[i]["theFieldYouWant"] == theValueYouWant){
        return users[i];
    }   
  }
}

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.results = getData(response);
        },
        function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        }
    );

Answer 5

Answer №3

here is an example of how to utilize this method

$http.get('data.json').then(function(response) {
    console.log(response);
    $scope.results = response;
},
function(error) {
    $scope.results = [];
    console.log(error);
});

Answer 6

here is an example of how to utilize this method

$http.get('data.json').then(function(response) {
    console.log(response);
    $scope.results = response;
},
function(error) {
    $scope.results = [];
    console.log(error);
});

Answer 7

Answer №4

The use of success and error methods have been phased out.

Instead, you can utilize the 'then' function

$http.get('data/registered-user-list.json').then(function(response) {
    if (response.status == 200) {
        $scope.results = data;
    } else {
        // log error
    }
});

Answer 8

The use of success and error methods have been phased out.

Instead, you can utilize the 'then' function

$http.get('data/registered-user-list.json').then(function(response) {
    if (response.status == 200) {
        $scope.results = data;
    } else {
        // log error
    }
});

Extracting precise information from a JSON file using Angular's $http.get

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Problem with Onsen UI navigation: It is not possible to provide a "ons-page" element to "ons-navigator" when attempting to navigate back to the initial page

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

Convert a CSV file into JSON format using RxJava2

The function os.platform in React and Electron mistakenly identifies the browser as the operating system instead of the actual OS

Creating dynamic animations for your elements with AJAX

The variable req.body.Dates has not been declared

Is there a reason why the JSX select element does not automatically select the option (implementing 'selected')? I'm unsure if I am overlooking something

Error: Attempting to access the 'client' property of an undefined object

What is the best way to trigger a javascript modal to open automatically after a specific duration

Adding specific props, such as fullWidth, at a certain width, like 'sm', in Material UI React

Tips on how to showcase the current time in the local timezone on Next.js without encountering the error message "Text content does not match server-rendered HTML."

Navigate to a list item once Angular has finished rendering the element

Deactivate the typeahead function in the Angular controller based on the user's preference

Obtaining the sum of two variables from two separate functions results in a value of NaN

Highchart tip: How to create a scrollable chart with only one series and update the x-axis variable through drilldown

A TypeError was not captured when attempting to access information about Ionic1 through the angular.module

Unexpected behavior: getElementById returning URL instead of element

Is utilizing the "sandbox attribute for iframes" a secure practice?

Leverage angular-translate to establish placeholder text upon blurring

Javascript adds a comma after every postback event