请教一个关于angular如何通过url将获取的json数据解析显示的问题。

weixin_41773142 2018-02-28 10:24:21

各位前辈好：

今天学习angular，看到可以使用ng-bind将获取的数据很方便的显示在UI中。
所以想请教一个问题。

我可以通过这个url获得一个json的数据，
https://api.steemjs.com/get_content?author=smooth&permlink=test
获得数据后，我想将其中几个字段（author、permlink、category）显示出来，不知道如何编写代码。

请问有人可以指点一下嘛？

URL：
https://api.steemjs.com/get_content?author=smooth&permlink=test

返回的数据
json：
{
"id": 425183,
"author": "smooth",
"permlink": "test",
"category": "spam",
"parent_author": "",
"parent_permlink": "spam",
"title": "test",
"body": "testa",
"json_metadata": "{\"tags\":[\"spam\"]}",
"last_update": "2016-08-03T08:49:48",
"created": "2016-08-03T08:49:48",
"active": "2017-06-07T21:46:36",
"last_payout": "2016-09-02T20:50:06",
。。。。。。。。。。。。。。
}

因为是初学者，问题可能过于小白，请不要见笑。
谢谢~

...全文

739 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

njjokeboy 2018-03-02

打赏
举报

引用 3 楼 functionsub 的回复:

<ul>
  <li ng-repeat="(key,val) in zzz">
    {{key}} : {{ val }}
  </li>
</ul>
这样遍历所有字段感觉你是想遍历里面的那个active_votes 数组，所以要这样：
<ul>
  <li ng-repeat="x in zzz.active_votes ">
    {{x.voter}} // x即为active_votes 重的每个元素
  </li>
</ul>

那能否这样理解如果使用ng-repeat，在做列表页面是，可以用来获取循环的作用？

l245382052 2018-03-02

打赏
举报


//定义一个变量
$scope.Data = {};
//把你查询到的json赋给定义的变量
$scope.Data = json;

页面上可以这样写,json中数据多的话就需要做循环遍历


<span ng-bind="Data.author"></span>
<span ng-bind="Data.permlink"></span>
<span ng-bind="Data.category"></span>

functionsub 2018-03-01

打赏
举报

<ul>
  <li ng-repeat="(key,val) in zzz">
    {{key}} : {{ val }}
  </li>
</ul>

这样遍历所有字段感觉你是想遍历里面的那个active_votes 数组，所以要这样：

<ul>
  <li ng-repeat="x in zzz.active_votes ">
    {{x.voter}} // x即为active_votes 重的每个元素
  </li>
</ul>

functionsub 2018-03-01

打赏
举报

返回的数据没有数组啊，你用repeat干嘛。repeat是遍历器，所以你这里是把所有字段遍历出来了就是说你的x是zzz里的各个字段，再去.author肯定没有啊

njjokeboy 2018-02-28

打赏
举报



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
  <li ng-repeat="x in zzz">
    {{ x.author }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
	
app.controller('siteCtrl', function($scope, $http) {
	$http({
		method: 'GET',
		url: 'https://api.steemjs.com/get_content?author=smooth&permlink=test'
	}).then(function successCallback(response) {
			$scope.zzz = response.data;
		}, function errorCallback(response) {
			// 请求失败执行代码
	});
  
});
</script>

</body>
</html>

按照示例写了个但是不知道为啥不显示。。。