If this notTrue.json file is static, in the sense that it is already there when the user accesses index.html and will not change during the user's use of the application, then it is best to include notTrue.json via a script tag, before loading angular.js, like this:
<script src="js/notTrue.json"></script>
<script src="js/angularjs"></script>
Then you will have access to the Foo object in your application. The following code illustrates this by outputting the JSON format on screen:
<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>
In the above example, the on-page output will be:
[
{
"bar": "Hello World",
"subItem": {
"phone1": "(555) 543-213",
"email": "[email protected]"
}
},
{
"bar": "Goodnight Moon",
"subItem": {
"phone1": "(555) 521-3344",
"email": "[email protected]"
}
}
]
Note that the pre tag and the extra arguments to the JSON.stringify method are used to get the JSON string pretty printed. But this is not essential to your question.
Dynamically loading notTrue.js
If on the other hand, you want to defer loading notTrue.js until some event takes place, because its contents might change between page load and that event, then you could use $http.get.
In the following example, the file is loaded upon a button click, and the JSON format is output on screen:
<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>
The output is the same as with the first solution.
Note that with this method, the loaded file must reside on the same server, which I understand is your case.
Only go for this solution if the first one does not suit your needs.
You will want to add checks and deal with potential errors for when the file is not found, does not have the expected format, etc.
Finally, be careful with using eval: only use it when you trust the source, which I believe is the case here.
Foois a string? Can you clarify?evalmight do what you need. Seems like you're saying you have some arbitrary Javascript text you need to interpret, which is whatevaldoes. That being said, you don't even have JSON like data, with thevar Foo =, you just have javascript. If that part is well known, you can eval and then access foo to retrieve the object. Otherwise, the real answer is to clean up your data sources. It should be sanitized before it hits the client.Foo. I am lost as to what is your question then, because convertingFooto valid JSON is trivial.