加载本地 json 文件

Question

我想创建一个简单的本地网站来可视化我的 json 量角器测试生成的数据。问题是 angular 不支持加载本地文件，所以你知道有什么方法可以在本地使用这个 JSON 吗？我不想设置服务器只是为了将单个小文件加载到单个变量。

我试过 $http，但显然会抛出 XMLHttpRequest Cross origin request。我很感激任何建议。

编辑： 我决定运行来自 npm 的 http-server。我在端口 8080 上启动它并指定我的项目的路径。然后我有

var app = angular.module("reportingApp", ['nvd3']);

app.controller('MainController', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http) {
    $scope.title = 'abc';

    $http.get('http://127.0.0.1:8080/e2e-Report/combined.json').success(function(data) {
        $scope.title = data.jsonData;
        });
}]);

在我的 app.js 中通过 http 获取文件，但它抛出 No 'Access-Control-Allow-Origin' header is present on the requested resource

Answer 1

您可以通过安装
创建本地服务器npm install http-server -g

安装后，转到命令行 -> 项目路径 ->http-server &

例如

D:\angularProject> http-server & (Press Enter)

它将启动本地主机服务器：localhost://8080。在浏览器中打开 localhost://8080。

现在，您的 CORS 问题将不存在了。享受吧。

编辑：您需要 node 安装在您的机器上。

示例代码：

$http.get("api/my.json").then(function (res){
            console.log("res",res);

        })

Answer 2

使用 Brackets 等编辑器处理此类作品的简单方法，通过实时取景，您可以得到想要的东西。

加载本地 json 文件

Load local json file

javascript

json

xmlhttprequest

local

angularjs