How to load multiple json files

[Abdou00]

I started on meanjs and wanted to know how to call several json files? Here is the code I wrote:
'use strict';
angular.module('core').controller('HomeController', ['$scope', '$http', 'Authentication', 'leafletData', function ($scope, $http, Authentication, leafletData) {
$scope.authentication = Authentication;

 angular.extend($scope, {
    center: {
    lat: 48.934070,
    lng: 2.327557,
    zoom: 15
  },
  defaults: {
    scrollWheelZoom: true
  },
  tiles: {
    Name: 'Espaces Verts Villeneuve la garenne',
    url: 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.{ext}?apikey=myapikey',
    options: {
      ext: 'png',
      attribution: '&copy; ThunderForest | &copy; <a href="http://thunderforest.com/maps/landscape/">ThunderForest - Landscape</a>'
    }
  },
  controls: {
    scale: true
  },
  legend: {
    position: 'bottomright',
    colors: [ '#ff0000', '#28c9ff', '#0000ff', '#ecf386' ],
    labels: [ 'Légende 1', 'Légende 2', 'Légende 3', 'Légende 4' ]
  },
  popup: {
    maxWidth: 300
  }
});

$http.get('modules/core/client/json/sites.json').then(function (response) {
 angular.extend($scope, {
    geojson: {
      data: response.data,
      style: {
        'fillColor': '#ff0000',
        'fillOpacity': 0.5,
        'color': '#000000',
        'opacity': 0.2'
      }
    }
  });
});

$http.get('modules/core/client/json/arbres.json').then(function (response1) {
  angular.extend($scope, {
    geojson: {
      data: response1.data,
    }
   });
  });
 }
]);

Problem when I execute this code there is only the second file that is loading. Would anyone have an idea of what's wrong ??

[mleanos]

It's a little difficult to follow what you're trying to accomplish here without proper markdown formatting. However, from what I can tell, whichever JSON $http.get responds last will be set to your $scope.geojson object, since it would just overwrite the previous response. You can just assign each file to it's own $scope variable.

I have two suggestions.. First, you should try to avoid using angular.extend on the $scope object. It's much simpler, and easier to predict the behavior, if you just use something like $scope.geojson = {};.

My second suggestion would be to load your JSON files on the server-side and then use API endpoints to return them to the client. If you must have these files existing on the client-side then your idea of using $http.get(pathToJSON).then.. should work fine.

[Abdou00]

Hi mleanos and thank you for your answer, I followed your advice:

$http.get('modules/core/client/json/arbres-voirie.json').then(function (response1) {
 $scope.geojson = {
  data: response1.data
 };
});

$http.get('modules/core/client/json/sites.json').then(function (response) {
 $scope.geojson = {
  data: response.data,
  style: {
    'fillColor': '#ff0000',
    'fillOpacity': 0.5,
    'color': '#000000',
    'opacity': 0.2
  }
 };
});

But I get the same result both files are loaded but only the second file is displayed. As for the json files they exist on the client.

[shanavas786]

@Abdou00 Its quite simple, the request which gets executed last would override the $scope.geojson object.
The following is a simple workaround. However as @mleanos mentioned it would be better to create a server route which combines those files and returns a single object.

$http.get('modules/core/client/json/arbres-voirie.json').then(function (response1) {
  $http.get('modules/core/client/json/sites.json').then(function (response2) {
    $scope.geojson = {
      data: Object.assign(response1.data, response2.data),
      style: {
        'fillColor': '#ff0000',
        'fillOpacity': 0.5,
        'color': '#000000',
        'opacity': 0.2
      }
    };
  });
});

[Abdou00]

Thanks for your help guys I understood my mistake and am going through a server route.