Javascript 将我的数据json放在另一个文件中，并将其调用到我的控制器中

您好，我正在使用AngularJS我正在开发一个简单的应用程序，我的json中有一些数据，如：

angular.module('app', []).controller('MainController', ['$scope', function($scope) {
      $scope.cities = [{
        name: "city A",
        elements: [{
          id: 'c01',
          name: 'name1',
          price: 15,
          qte: 10
        }, {
          id: 'c02',
          name: 'name2',
          price: 18,
          qte: 11
        }, {
          id: 'c03',
          name: 'name3',
          price: 11,
          qte: 14
        }],
        subsities: [{
          name: "sub A1",
          elements: [{
            id: 'sub01',
            name: 'nameSub1',
            price: 1,
            qte: 14
          }, {
            id: 'sub02',
            name: 'nameSub2',
            price: 8,
            qte: 13
          }, {
            id: 'sub03',
            name: 'nameSub3',
            price: 1,
            qte: 14
          }]
        }, {
          name: "sub A2",
          elements: [{
            id: 'ssub01',
            name: 'nameSsub1',
            price: 1,
            qte: 7
          }, {
            id: 'ssub02',
            name: 'nameSsub2',
            price: 8,
            qte: 1
          }, {
            id: 'ssub03',
            name: 'nameSsub3',
            price: 4,
            qte: 19
          }]
        }, {
          name: "sub A3",
          elements: [{
            id: 'sssub01',
            name: 'nameSssub1',
            price: 1,
            qte: 11
          }, {
            id: 'sssub02',
            name: 'nameSssub2',
            price: 2,
            qte: 15
          }, {
            id: 'sssub03',
            name: 'nameSssub3',
            price: 1,
            qte: 15
          }]
        }]
      }, {
        name: "city B",
        elements: [{
          id: 'cc01',
          name: 'name11',
          price: 10,
          qte: 11
        }, {
          id: 'cc02',
          name: 'name22',
          price: 14,
          qte: 19
        }, {
          id: 'cc03',
          name: 'name33',
          price: 11,
          qte: 18
        }]
      }, {
        name: "city C",
        elements: [{
          id: 'ccc01',
          name: 'name111',
          price: 19,
          qte: 12
        }, {
          id: 'ccc02',
          name: 'name222',
          price: 18,
          qte: 17
        }, {
          id: 'ccc03',
          name: 'name333',
          price: 10,
          qte: 5
        }]
      }];
      $scope.extractSubsities = function(itemSelected) {
        if (itemSelected && itemSelected.elements) {
          $scope.data = itemSelected.elements;
        }
      }

    });

为了生成干净的代码和良好的实践，我需要将数据放在其他json文件中，并像这样调用它：

angular.module('app', []).controller('MainController', ['$scope', function($scope) {
      $scope.cities = /*call my json here please how can do that*/;
      $scope.extractSubsities = function(itemSelected) {
        if (itemSelected && itemSelected.elements) {
          $scope.data = itemSelected.elements;
        }
      }

    });

请任何人都可以帮助我

更新

在你的回答之后，我应用了它们，但它对我不起作用，请看看我做了什么：

我安装了一个web服务器（xampp），并将所有文件放在服务器上

我更改了脚本，如下所示：

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/controllers/data.json').then(function(response) {
            $scope.cities = response.data;
  });
  $scope.extractSubsities = function(itemSelected) {
    if (itemSelected && itemSelected.elements) {
        $scope.data = itemSelected.elements;
    }
  }
 }]);

这是我的datadata.json

{
"data":[{
        "name": "city A",
        "elements": [{
          "id": "c01",
          "name": "name1",
          "price": "15",
          "qte": "10"
        }, {
          "id": "c02",
          "name": "name2',
          "price": "18,
          "qte": "11"
        }, {
          "id": "c03",
          "name": "name3",
          "price": "11",
          "qte": "14"
        }],
        "subsities": [{
          "name": "sub A1",
          "elements": [{
            "id": "sub01",
            "name": "nameSub1",
            "price": "1",
            "qte": "14"
          }, {
            "id": "sub02",
            "name": "nameSub2",
            "price": "8",
            "qte": "13"
          }, {
            "id": "sub03",
            "name": "nameSub3",
            "price": "1",
            "qte": "14"
          }]
        }, {
          "name": "sub A2",
          "elements": [{
            "id": "ssub01",
            "name": "nameSsub1",
            "price": "1",
            "qte": "7"
          }, {
            "id": "ssub02",
            "name": "nameSsub2",
            "price": "8",
            "qte": "1"
          }, {
            "id": "ssub03",
            "name": "nameSsub3",
            "price": "4",
            "qte": "19"
          }]
        }, {
          "name": "sub A3",
          "elements": [{
            "id": "sssub01",
            "name": "nameSssub1",
            "price": "1",
            "qte": "11"
          }, {
            "id": "sssub02",
            "name": "nameSssub2",
            "price": "2",
            "qte": "15"
          }, {
            "id": "sssub03",
            "name": "nameSssub3",
            "price": "1",
            "qte": "15"
          }]
        }]
      }, {
        "name": "city B",
        "elements": [{
          "id": "cc01",
          "name": "name11",
          "price": "10",
          "qte": "11"
        }, {
          "id": "cc02",
          "name": "name22",
          "price": "14",
          "qte": "19"
        }, {
          "id": "cc03",
          "name": "name33",
          "price": "11",
          "qte": "18"
        }]
      }, {
        "name": "city C",
        "elements": [{
          "id": "ccc01",
          "name": "name111",
          "price": "19",
          "qte": "12"
        }, {
          "id": "ccc02",
          "name": "name222",
          "price": "18",
          "qte": "17"
        }, {
          "id": "ccc03",
          "name": "name333",
          "price": "10",
          "qte": "5"
        }]
      }];
}

---

但是它仍然无法加载数据

您需要使用ajax来获取文件：

$http.get('file.json').then(function(response) {
    $scope.cities = response.data;
});

---

您需要使用ajax获取文件：

$http.get('file.json').then(function(response) {
    $scope.cities = response.data;
});

---

您需要注入

$http

服务来从外部源获取数据，在您的例子中，它只是一个JSON文件

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
  $http.get('link to json').then(function(response) {
            $scope.cities = response.data;
  });
  $scope.extractSubsities = function(itemSelected) {
    if (itemSelected && itemSelected.elements) {
        $scope.data = itemSelected.elements;
    }
  }
 }]);

---

您需要注入

$http

服务来从外部源获取数据，在您的例子中，它只是一个JSON文件

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
  $http.get('link to json').then(function(response) {
            $scope.cities = response.data;
  });
  $scope.extractSubsities = function(itemSelected) {
    if (itemSelected && itemSelected.elements) {
        $scope.data = itemSelected.elements;
    }
  }
 }]);

---

您需要将$http服务注入控制器，并向文件目录中的json文件发出get请求

您的控制器将如下所示：

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
    $scope.cities;
    $scope.extractSubsities = function(itemSelected) {
        if (itemSelected && itemSelected.elements) {
            $scope.data = itemSelected.elements;
        }
    }

    function getCities() {
        $http.get('/data/cities.json').then(function(response) {
            $scope.cities = response.data;
        });
    }

}]);

假设您的json文件名为cities.json，并且位于data/cities.json位置

希望这有帮助

有关最佳实践的更多信息，请参阅John Papa的styleguide@github：

---

您需要将$http服务注入控制器，并向文件目录中的json文件发出get请求

您的控制器将如下所示：

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
    $scope.cities;
    $scope.extractSubsities = function(itemSelected) {
        if (itemSelected && itemSelected.elements) {
            $scope.data = itemSelected.elements;
        }
    }

    function getCities() {
        $http.get('/data/cities.json').then(function(response) {
            $scope.cities = response.data;
        });
    }

}]);

假设您的json文件名为cities.json，并且位于data/cities.json位置

希望这有帮助

有关最佳实践的更多信息，请参阅John Papa的styleguide@github：

---

---

将其存储在服务器上并进行http调用以获取它。@HarryIM请再次查看我的问题，我更新了失败http调用的浏览器控制台中的错误消息是什么？@HarryIM在我的控制台中没有错误添加错误处理以监视错误，$http.get（'js/controllers/data.json'）。然后（函数（响应）{$scope.cities=response.data；}，函数（错误）{console.log（错误）；}）；将其存储在服务器上并进行http调用以获取它。@HarryLim请再次查看我的问题我已更新浏览器控制台中失败的http调用的错误消息是什么？@HarryLim在我的控制台中添加错误处理以监视错误时没有错误，$http.get（'js/controllers/data.json'）。然后（函数（响应）{$scope.cities=response.data；}，函数（错误）{console.log（错误）；}）；哪里关闭了['$scope'，'$http'，函数（$scope，$http）？是的，很抱歉，显然忘记了关闭数组！但是，是的，正如另一个答案中提到的，您需要使用Web服务器。您可以通过npm键入“npm安装http服务器”来安装一个完成后，键入“http server-o”。然后只需转到控制台中指定的url即可。我安装了一个服务器web，并将所有文件放在服务器上，但它不适用于mewhere“[”of['$scope'，'$http'，function（$scope，$http）已关闭？是的，很抱歉，显然忘记关闭阵列！但是，是的，正如另一个答案中提到的，您需要使用Web服务器。您可以通过npm安装一个Web服务器，方法是键入“npm安装http服务器”，完成后键入“http服务器-o”。在此之后，您只需转到控制台中指定的url。我安装了一个服务器web，并将所有文件都放在服务器上，但它无法使用me@Abderrahim您在控制台中看到的错误是什么？请确保在$http.get（）中有正确的JSON文件路径是的，我检查了我的控制台，这是XMLHttpRequest无法加载的错误file:///C:/web/web/carbu_new/carbu/carbu/js/controllers/data.json. 跨源请求仅支持协议方案：http、data、chrome、chrome扩展、https、chrome扩展资源。Anyhelpplease@Abderrahim我相信你使用的是谷歌chroments跨源请求。在不同的浏览器上试用，它应该可以工作。要在google chrome中工作，请参阅本文我使用了firefox和internet explorer，我也使用了相同的浏览器probleme@Abderrahim您使用的是web服务器吗？@Abderrahim您在控制台中看到的错误是什么？请确保您在$http中有正确的JSON文件路径.get（）是的，我检查了我的控制台，这是XMLHttpRequest无法加载的错误file:///C:/web/web/carbu_new/carbu/carbu/js/controllers/data.json. 跨源请求仅支持协议方案：http、data、chrome、chrome扩展、https、chrome扩展资源。Anyhelpplease@Abderrahim我相信你使用的是谷歌chroments跨源请求。在不同的浏览器上试用，它应该可以工作。要在google chrome中工作，请参阅本文我使用了firefox和internet explorer，我也使用了相同的浏览器probleme@Abderrahim您正在使用web服务器吗？