Working with AngularJS: Accessing a JSON file from the local directory

Question

Working with AngularJS: Accessing a JSON file from the local directory

The answers to my previous questions on this topic have not been satisfactory.

It seems that most examples and tutorials for AngularJS online always define tiny JSON arrays directly inside the JavaScript code...

So, let's simplify things with a basic example:

(function(){
        var app = angular.module('store', [ ]);
    
        app.controller('StoreController', function(){
            this.product = products;
        }); 
    
        var products = [
            {name: "Linux Mint", origin: "Ireland"},
            {name: "Ubuntu", origin: "Isle of Man"},
            {name: "OpenSUSE", origin: "Germany"},
            {name: "Fedora", origin: "USA"}
        ];
    })();

I want to modify the "products" array to load a JSON file from the same folder; I am not allowed to use external tools or frameworks, and I cannot set up servers as suggested in some previous responses. Furthermore, I cannot change the existing code, only the part after the "=", possibly utilizing $scope and $http.

How would you approach this in a functional manner?

javascript angularjs json

Answer 1

Answer №1

Experiment with the following:

(function(){
    var app = angular.module('shop',[]);
    app.controller('ShopController',['$http',function($http){
        this.item=$http.get('data.json').success(function(response){
            return response.data;
        });
    }]);
})();

Answer 2

Experiment with the following:

(function(){
    var app = angular.module('shop',[]);
    app.controller('ShopController',['$http',function($http){
        this.item=$http.get('data.json').success(function(response){
            return response.data;
        });
    }]);
})();

Answer 3

Answer №2

If you want to try this out, make sure your JSON file is set up in the directory and direct the GET request towards it just like any other GET request. Hopefully, this explanation helps. *This is primarily for mimicking a request, although certain parts may be similar when making a server request.

function CustomController(customService) {
  var vm = this;
  customService.fetchData().then(function(response) {
    vm.data = response;
  });
}

function customService() {
  var Custom = this,
    URLS = {
      FETCH: '/data.json'
    },
    responseData,
    allData;

  Custom.fetchData = function() {
    return $http.get(URLS.FETCH).then(function(response) {
      return response.data
    });
  };
}

Answer 4

If you want to try this out, make sure your JSON file is set up in the directory and direct the GET request towards it just like any other GET request. Hopefully, this explanation helps. *This is primarily for mimicking a request, although certain parts may be similar when making a server request.

function CustomController(customService) {
  var vm = this;
  customService.fetchData().then(function(response) {
    vm.data = response;
  });
}

function customService() {
  var Custom = this,
    URLS = {
      FETCH: '/data.json'
    },
    responseData,
    allData;

  Custom.fetchData = function() {
    return $http.get(URLS.FETCH).then(function(response) {
      return response.data
    });
  };
}

Answer 5

Answer №3

If you're looking to read a local JSON file, one approach is using the FileReader. Check out this working example: http://plnkr.co/edit/LtYOyeyxJncnmBGw5YRp?p=preview

app.controller("MainCtrl", ["$scope", function($scope) {
    $scope.jsonString = "";

    $scope.readFromFile = function() {
        if(FileReader) {
            var input = document.getElementById('myFile');
            var file = input.files[0];

            var fr = new FileReader();
            fr.onload = function(e) {
                $scope.jsonString = e.target.result;
                $scope.$apply();
            }

            fr.readAsText(file);
        } else {
            window.alert('FileReader is not found, sorry');
        }
    }
}]);

Answer 6

If you're looking to read a local JSON file, one approach is using the FileReader. Check out this working example: http://plnkr.co/edit/LtYOyeyxJncnmBGw5YRp?p=preview

app.controller("MainCtrl", ["$scope", function($scope) {
    $scope.jsonString = "";

    $scope.readFromFile = function() {
        if(FileReader) {
            var input = document.getElementById('myFile');
            var file = input.files[0];

            var fr = new FileReader();
            fr.onload = function(e) {
                $scope.jsonString = e.target.result;
                $scope.$apply();
            }

            fr.readAsText(file);
        } else {
            window.alert('FileReader is not found, sorry');
        }
    }
}]);

Working with AngularJS: Accessing a JSON file from the local directory

Answer №1

Answer №2

Answer №3

Similar questions

I possess information stored within the array object below, and I aim to transform it into a different array object format

AngularJS function orderBy reverses the array instead of sorting it

Acquire concealed JSON data within an HTML document using R programming

Retrieve every HTML element that is currently visible on the screen as a result

Add integer to an array of strings

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

Adding dots between page numbers when using ReactJS/Javascript Pagination can be achieved by implementing a specific method

Steps to adding a collection of links (stylesheets, javascript files) to each html document

Using a pool.query with async/await in a for-of loop for PostgreSQL

The response from the XHR object is coming back as "Object Object

Guide on converting HTML datetime picker datetime-local to moment format

Using Typescript/JSX to assign a class instance by reference

What is the best way to ensure that JavaScript code is executed in a specific sequence?

Using Pocketbase OAuth in SvelteKit is not currently supported

Tips for updating the value of a $scope variable and running tests with AngularJS Jasmine

Is it possible to create Firebase real-time database triggers in files other than index.js?

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

Magical Stylist - Eradicate Indicators while Preserving Labeling

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

Is it possible to retrieve data from multiple controllers and send it to the server using AngularJs?