javascript - 最好使用 Angular 将非 JSON 文件更改为真正的 JSON 文件

Question

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

我正在尝试在 angular.js 的 Controller 中访问 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 时它已经存在，并且在用户使用过程中不会改变应用程序，那么最好在加载 angular.js 之前通过 script 标签包含 notTrue.json，如下所示:

<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:仅当您信任来源时才使用它，我相信这里就是这种情况。