Question

我试图在Angular中使用JSON文件，但参考文件不是真正的JSON。访问它并将其解析为真正的JSON的最佳方法是什么？

我试图在angular.js中的控制器中访问notTrue.json，就像下面的文件结构一样。并将notTrue.json解析为真正的JSON格式。

示例文件结构：

index.html
js (folder)
 - angular.js
 - notTrue.json
 - etc
css (folder)
img (folder)

示例非JSON格式，notTrue.json文件：

var Foo = [{
    'bar': 'Hello World',
    'subItem': {
        'phone1': '(555) 543-213',
        'email': 'foo@bar.com'
    }
}, {
    'bar': 'Goodnight Moon',
    'subItem': {
        'phone1': '(555) 521-3344',
        'email': 'foo2@bar.com'
    }
}];

我希望将其转换为适当的JSON格式，如下所示：

[{
    "bar": "Hello World",
    "subitem": {
        "phone1": "(555) 543-213",
        "email": "foo@bar.com"
    }
}, {
    "bar": "Goodnight Moon",
    "subitem": {
        "phone1": "(555) 521-3344",
        "email": "foo2@bar.com"
    }
}]

Answer 1

如果这个notTrue.json文件是静态的，那么当用户访问index.html并且在用户使用该应用程序期间它不会改变时，它就已存在，那么它就是最好在加载notTrue.json之前通过script标记添加angular.js，如下所示：

<script src="js/notTrue.json"></script>
<script src="js/angularjs"></script>

然后您将可以访问应用程序中的Foo对象。以下代码通过在屏幕上输出JSON格式来说明这一点：

<div ng-app="myApp" ng-controller="myControler">
   <pre>{{json}}</pre>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myControler', function($scope, $window) {
        // window.Foo was defined when loading notTrue.js 
        // Convert it to JSON string (pretty printed)
        $scope.json = JSON.stringify($window.Foo, null, 4);
    });
</script>

在上面的示例中，页面上的输出将是：

[
    {
        "bar": "Hello World",
        "subItem": {
            "phone1": "(555) 543-213",
            "email": "foo@bar.com"
        }
    },
    {
        "bar": "Goodnight Moon",
        "subItem": {
            "phone1": "(555) 521-3344",
            "email": "foo2@bar.com"
        }
    }
]

请注意，pre标记和JSON.stringify方法的额外参数用于获取相当打印的JSON字符串。但这对你的问题并不重要。

动态加载notTrue.js

如果另一方面，您希望延迟加载notTrue.js直到某个事件发生，因为其内容可能会在页面加载和该事件之间发生变化，那么您可以使用$http.get。

在以下示例中，单击按钮时会加载文件，并在屏幕上输出JSON格式：

<div ng-app="myApp" ng-controller="myControler">
   <button ng-click="load('js/notTrue.json')">Load</button>
   <pre>{{json}}</pre>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myControler', function($scope, $http) {
        // Define what should happen on button click:
        $scope.load = function(file) {
            $http.get(file).then(function(response) {
                // Extract from the retrieved file contents
                // the part between the first "=" and 
                // final (optional) semi-colon
                var txt = response.data.replace(/^.*?=([\S\s]*?);?\s*$/, '$1');
                // Evaluate that text, adding brackets to avoid misinterpretation
                // when text starts with opening brace.
                var Foo = eval('(' + txt + ')');
                // and convert to JSON string (pretty printed)
                $scope.json = JSON.stringify(Foo, null, 4);
            });
        };
    });
</script>

输出与第一个解决方案相同。

请注意，使用此方法，加载的文件必须位于同一服务器上，我理解这是您的情况。

如果第一个解决方案不符合您的需求，请选择此解决方案。

您将需要添加检查并处理未找到文件，没有预期格式等的潜在错误。

最后，小心使用eval：只有在信任来源时才使用它，我相信这就是这种情况。

Answer 2

第一个例子是普通的javascript代码 - 你说你信任源代码。

如果已经返回此代码以响应服务器请求，并且可以将其作为responseText访问，那么

var JSONtext = JSON.stringify( eval(responseText.replace(/[^=]*=/,"")));

应该做的工作。（正则表达式替换取出变量定义）。

使用Angular将非JSON文件更改为真正的JSON文件

2 个答案: