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

Ensure the initial value in the dropdown menu is automatically set to the first value in VueJs

What is the most effective way to compare a nested array using the map or filter function in order to return only the first match

Trouble with Setting Up the Email Address for the 'File a Complaint' Form in WordPress

declaring a variable in JSP and incorporating it into jQuery

Is it possible to utilize setTimeout to demonstrate the execution of a while loop visually?

Error encountered: The EVM has reverted the transaction

Implementing Expected Conditions using JavaScript calls in Selenium can greatly improve the reliability and efficiency of

Communicating between iframes and parent elements via events

Creating a unique data attribute in Alpine.js - A step-by-step guide

Filter your DataTables columns by searching for text within a specific range

When executing class methods, Ember.js encounters errors stating "method does not exist."

What is the best way to eliminate whitespaces and newlines when using "document.execCommand("copy")" function?

Display notification only on certain days

Navigating to a new URL after submitting a form in React

Is there a way to create an input field that accepts only numbers and behaves like a password field simultaneously?

Developing a custom AngularJS directive for uploading files as base64

How to submit a form using AngularJS on an ASP.NET webpage

eliminate an element from the dictionary

Unload pre-loaded JavaScript documents

Exception still present in registered Jackson LocalDate module