i'm trying to pass a JSON Object to my app using ng-init + stringify but it doesn't work i get a Lexer error.
Lexer Error: Unexpected nextharacter at columns 8-8 [#] in expression [friends=#{JSON.stringify(friends)}].
Javascript
var friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}
];
</script>
HTML
<div ng-init="friends=#{JSON.stringify(friends)}"></div>
i'm trying to pass a JSON Object to my app using ng-init + stringify but it doesn't work i get a Lexer error.
Lexer Error: Unexpected nextharacter at columns 8-8 [#] in expression [friends=#{JSON.stringify(friends)}].
Javascript
var friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}
];
</script>
HTML
<div ng-init="friends=#{JSON.stringify(friends)}"></div>
3 Answers
Reset to default 4You should try with those quotes:
<div ng-init="friends='#{JSON.stringify(friends)}'"></div>
I don't know what's your templating engine, but with ejs for example it would be:
<div ng-init="friends='<%= JSON.stringify(friends) %>'"></div>
Also if you have some issue with some simple or/and doubles quotes you can do replace them with a regexp like that:
<div ng-init="friends='<%= JSON.stringify(friends).replace(/"/g, "\\\"").replace(/'/g, "\\'") %>'">
I don't know if it's a best practice or not in angular, but thanks to this I could share some data previously retrieved from server to angular. This way I prevented many requests from Angulars controllers to the public API which requested the backend.
And in the angular side, you can do something like that: $scope.friends = JSON.parse(friends) to "expose" your json.
You have to do it in the angular way, you can access the javascript variable using $window of angularjs and convert it to $scope variable in the controller and can access it in the html
Take a look into your code, i just modified it a little to make it work,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="myController">
<h1>Hello Plunker!</h1>
<script>
var friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}
];
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', '$window', function($scope, $window) {
$scope.friendsInscope = $window.friends;
}]);
</script>
<!--<div ng-init="friends=#{JSON.stringify(friends)}">{{friends}}</div>-->
<div ng-init="friends=friendsInscope">{{friends|| json}}</div>
</body>
</html>
Working plunker
Hope this helps!
Angular is working with scopes, it has no access to global variables/functions. So it will never use your friends variable, neither it is possible to access JSON.stringify from expression. Also there is no #{} operator in Angular, about which it told you in the error description.
I would suggest you to read:
- https://docs.angularjs/guide/scope
- https://docs.angularjs/guide/expression