我们在阅读包含html内容的json文件数据时遇到了问题 . 请使用我们正在使用的json数据查找下面的代码 .
Json data:
{
"aboutContent": {
"listItems": [{
"title": "Investors",
"description": "Investors Together, we are transforming health care with trusted and caring solutions. Learn more about upcoming events,",
"image": "image/ABCBS_handshake.jpg",
"something": "sadfsd"
}, {
"title": "Careers",
"description": "Discover your opportunity with us now. Learn more about careers at Anthem, Inc.",
"image": "image/ABCBS_AboutUs_Careers.jpg"
}, {
"title": "Locations",
"description": "Need to contact us? See where we are located near you. Learn more about our locations.",
"image": "image/ABC_AboutUs_Locations.jpg"
}, {
"title": "Foundation Guidelines",
"description": "See how Anthem Blue Cross Blue Shield gets involved. Learn more about our Foundation Guidelines and Community Involvement.",
"image": "image/ABCBS_AboutUs_Charity.jpg"
}, {
"title": "Press Room",
"description": "<div><span style=\"color: rgb(105, 105, 105); font-family: Arial; font-size: 12px; line-height: 16px;\">Investors Together, we are transforming health care with trusted and caring solutions.</span><a href=\"http://ir.antheminc.com/phoenix.zhtml?c=130104&p=irol-irHome\" style=\"color: rgb(0, 138, 183); text-decoration: none; font-family: Arial; font-size: 12px; line-height: 16px;\" target=\"_blank\">Learn more about upcoming events, financials and how to contact us </a>
</div>",
"image": "image/ABCBS_AboutUs_Press.jpg"
}]
}
}
Service
angular.module("newsStore.moduleServices", [])
.factory('aboutService', ['$http', '$q', aboutService]);
function aboutService($http, $q) {
return {
getAboutContent: function() {
var deferred = $q.defer(),
fetchContent = $http.get('json/about.json');
fetchContent.success(function(news) {
console.log(news);
deferred.resolve(JSON.parse(news));
}).error(function(error) {
console.log('error', error);
deferred.reject(error);
});
return deferred.promise;
}
}
}
Directive:
angular.module("newsStore.moduleDirectives", [])
.directive('renderAboutContent', ['aboutService', renderAboutContent])
function renderAboutContent(aboutService) {
return {
restrict: 'AE',
scope: {},
templateUrl: 'templates/about.html',
link: function(scope, element) {
aboutService.getAboutContent()
.then(function(results) {
scope.aboutList = results.aboutContent.listItems;
}, function(error) {
console.log('controller error', error);
});
scope.colWidth = function(content) {
return content.image && content.something ? 'col-xs-4' : 'col-xs-6';
}
}
}
}
HTML content:
<div class="col-md-12 aboutUs-ph padT10 content-ph_abt" ng-repeat="content in aboutList">
<div class="form-group" ng-if="content.image" >
<img src="{{content.image}}" class="img-responsive" />
</div>
<div class="middle" >
<span class="guidedTourText">
<b>{{content.title}}</b></span>
<br>
<span>{{content.description | to_trusted}} </span>
</div>
<div class="last" ng-if="content.something">
{{content.something}}
</div>
</div>
现在在上面的json文件中我们可以读取起始的三个项目,但我们无法读取最后一个,因为它在描述中有html元素 . 我也使用了ngsanitize,但没有帮助,所以你们可以告诉我如何解决这个问题 . 我运行页面时收到此错误
SyntaxError:Object.parse(native)位于http://localhost:8997/script/services.js:30:28处的http://localhost:8997/script/services.js:30:28处于http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:112:20处于l . $ eval(http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:125:305)处l. $ digest(http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:398)处于l . $ apply(http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:58)处于l(http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:81:171)处的S处的意外标记o( http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:85:301)at XMLHttpRequest.D.onload(http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:86:315)
我知道这个错误来自json本身,如果我删除html元素一切正常 .
如果我不清楚这个问题,请告诉我,提前谢谢 .
1 回答
看起来像Json是无效的,因为你包含带引号“html”的html代码 . 检查here尝试用单个''替换它 . 它应该可以帮助您避免此错误 .
如果你有问题显示HTML然后使用