AngularJS http 服务不读取 JSON答案

【问题标题】：AngularJS http service doesn't read JSONAngularJS http 服务不读取 JSON
【发布时间】：2015-11-12 17:06:43
【问题描述】：

我有这个画廊，其中包含“src”和“alt”的 AngularJS 表达式。表达式的数据位于 JSON 文件中。

没有 JSON 文件，即使用 AngularJS 控制器文件中表达式的所有数据，它可以工作。但是我需要将数据保存在 JSON 文件中，而我尝试连接 $html 的方式似乎不起作用，我根本看不到任何图像。

我错过了什么？非常感谢您的帮助！

var galleryApp = angular.module('galleryApp', []);

galleryApp.controller('galleryController', function galleryController($scope, $http) {
$http.get('images.json').success(function(data) {
	$scope.images = data;
	});
});

/*
and this is the JSON in a file called images.json
[

{
	'source'		: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg',
	'altText'	: 'Jeremiah Wilson'
},
{
	'source'		: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg',
	'altText'	: 'Jeremiah Wilson'
},
{
	'source'		: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg',
	'altText'	: 'Jeremiah Wilson'
},
{
	'source'		: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg',
	'altText'	: 'Jeremiah Wilson'
},
{
	'source'		: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg',
	'altText'	: 'Jeremiah Wilson'
}
]

*/

* {
	padding: 0;
	margin: 0;	
}
li {
	list-style: none;
}
body { margin: 0; background: #333; }
#mainGallery { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
#mainGallery div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}
#mainGallery div img { 
  width: 100%; 
  height: auto; 
}
@media screen and (max-width: 400px) {
  #mainGallery div { margin: 0; }
  #mainGallery { padding: 0; }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>

<div ng-controller = "galleryController" id="mainGallery">
	
    	<div ng-repeat="item in images">
        	<img src="{{item.source}}" alt="{{item.altText}}">
        </div>
    
</div>
</body>

【问题讨论】：

在 $scope 赋值语句的正上方，尝试在控制台中设置断点并查看该函数中data 返回的内容。您有可能正确获取数据，但没有将其加载到对象中或正确使用它。
您的 JSON 文件不包含有效的 JSON。修理它。 JSON 键和值必须用双引号括起来，而不是单引号。您的浏览器控制台中应该有错误。在开发过程中始终保持打开状态。
我想我太累了，很尴尬，当然是双引号，非常感谢！ @JB Nizet 您想复制/粘贴您的评论作为答案，以便我可以将其作为解决方案打勾吗？再次感谢！

标签： json angularjs http

【解决方案1】：

您使用的 JSON 格式无效。将以下格式化代码粘贴到您的 JSON 文件中

[
{
    "source": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg",
    "altText": "Jeremiah Wilson"
},
{
    "source": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg",
    "altText": "Jeremiah Wilson"
},
{
    "source": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg",
    "altText": "Jeremiah Wilson"
},
{
    "source": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg",
    "altText": "Jeremiah Wilson"
},
{
    "source": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg",
    "altText": "Jeremiah Wilson"
}]

您可以随时在JSON lint 验证您的 JSON

【讨论】：