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

Testing AngularJS controllers that implement moment.js functionality

Angular functions are executed twice upon being invoked within the html file

Creating an input field within a basic jQuery dialog box is not possible

Guide to importing simulated data from a JSON file in Angular 2 Karma Jasmine tests

If IE's conditional comments are dysfunctional

Tips on how child component can detect when the object passed from parent component has been updated in Angular

steps for transferring a shallow copy of an array to a function

What could be causing my node.js to fail in producing a true result within the return statement?

What specific data am I sending from my ajax request to the MVC controller?

An elusive melody that plays only when I execute the play command

Make sure to always display the status bar and soft keys

Managing form submissions using Jquery and checkboxes

What could be causing bundle.js to remain in a pending status on my website?

The Dynamic Duo: AngularJS and Thymeleaf

Are you experiencing issues with the cross-origin request failing in react-map-gl?

Having trouble fetching the correct URL from JSON using PHP

Error: Attempted the use of 'append' method on an object lacking the implementation of FormData interface, with both processData and contentType set to false

Is it possible to hide a menu by removing a class when the user clicks outside the menu?

The value attribute in the HTML input tag being dynamically increased by JavaScript

There was an error in locating the JavaScript file within the Node.js Express Handlebars application