在页面角度显示json数组数据

Question

I have a post function that gets my json. 我有一个获取我的json的帖子功能。

I want to print out all the 我想打印所有的

max_slots , base_image and c_name as they are in a array I am trying to loop though save value to scope to use in my HTML. 我试图循环max_slots ， base_image和c_name尽管它们将数组保存值以在HTML中使用。

Am I doing this right ? 我这样做对吗？ if not whats the best way to do this ? 如果不是，最好的方法是什么？

OBJECTIVE 目的

display the results of the json array post in my html 在我的html中显示json数组的结果

What I am trying 我在想什么

$scope.c_name = [0];
      $scope.GetData = function () {
            $http({
                url: "http://www.ccuktech.co.uk/ccuploader/campaigns/getCampaign",
                method: "POST",
                date: {},
                headers: {'Content-Type': 'application/json'}
            }).then(function (data) {
                // success
                console.log('you have received the data ');
                console.log(data);
                // $scope.base_image = response.base_image; $scope.c_name = response.c_name;
                $scope.c_name = data.data.c_name;
                // for(var i = 0; i < c_name.length; i++) {
                //     var obj = c_name[i];
                //
                //     console.log(obj.id);
                // }
                // $scope.max_slots = data.data.max_slots;
                // $scope.slot_image = data.slots.base_image;
                // console.log($scope.c_name);
            }, function (response) {
                // failed
                console.log('failed getting campaigns goo back to log in page.');
                console.log(response);
            });
        };

My HTML 我的HTML

<body ng-app='myApp'>
<h2>name</h2>:
{{c_name}}

<h2>max slots</h2>:
{{max_slots}}

<h2>image</h2>:
{{base_image}}
</body>

JavaScript JavaScript的

 $scope.GetData = function () {
            $http({
                url: "http://www.####.co.uk/####/####/####",
                method: "POST",
                date: {},
                headers: {'Content-Type': 'application/json'}
            }).then(function (data) {
                // success
                console.log('you have received the data ');
                console.log(data);
                // $scope.base_image = response.base_image; $scope.c_name = response.c_name;
                // $scope.c_name = data.data.c_name;
                for(var i = 0; i < c_name.length; i++) {
                    var obj = c_name[i];

                    console.log(obj.id);
                }
                // $scope.max_slots = data.data.max_slots;
                // $scope.slot_image = data.slots.base_image;
                // console.log($scope.c_name);
            }, function (response) {
                // failed
                console.log('failed getting campaigns goo back to log in page.');
                console.log(response);
            });
        };

        $scope.GetData();

console.log(data) result console.log（data）结果

Answer 1

Since the data in your API response is an Array. 由于API响应中的data是数组。 You can not just retrieve the values with dots 您不能只用点取值

Try changing $scope.c_name = data.data.c_name; 尝试更改$scope.c_name = data.data.c_name; with $scope.c_name = data.data[0].c_name; 其中$scope.c_name = data.data[0].c_name; and so on. 等等。

OR 要么

$scope.responseData = data.data[0];

And in your html 并在您的html中

<body ng-app='myApp'>
 <h2>name</h2>:
 {{responseData.c_name}}

 <h2>max slots</h2>:
 {{responseData.max_slots}}

 <h2>image</h2>:
 {{responseData.base_image}}
</body>

EDIT: Considering chance for occurring more than one element in data array 编辑：考虑发生data数组中多个元素的机会

$scope.responseData = data.data;

and in the HTML: 并在HTML中：

<body ng-app='myApp'>
  <div ng-repeat="data in responseData">
    <h2>name</h2>:
    {{data.c_name}}

    <h2>max slots</h2>:
    {{data.max_slots}}

    <h2>image</h2>:
    {{data.base_image}}
  </div>
</body>

在页面角度显示json数组数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-09-26 11:20:34

在页面角度显示json数组数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-09-26 11:20:34

解决方案1
1 已采纳 2017-09-26 11:20:34