以角度显示json数据

Question

我有一个贴子运行的帖子。我试图让json中的数据对象在我的页面和我的控制器上使用，所以我试图将值存储在Angular作用域中。

我不知道我在哪里出了问题，但我不能得到的价值，当我CONSOLE.LOG我得到

angular.js:11655 ReferenceError: data is not defined

我想存储

c_name 

max_slots 

base_image 

什么我综述需要

我需要列出我的数组对象上面的存储范围变量，这样我可以在我的JavaScript续在我的HTML中使用它们和其他地方滚筒。

我的JSON

{data: Array(1), status: 200, config: {…}, statusText: "OK", headers: ƒ} 
config 
: 
{method: "POST", transformRequest: Array(1), transformResponse: Array(1), url: "http://www.site.co.uk/one/two/getdata", date: {…}, …} 
data 
: 
Array(1) 
0 
: 
c_name 
: 
"ben" 
d_text 
: 
[] 
max_slots 
: 
2 
resolution 
: 
(2) [1920, 1080] 
slots 
: 
Array(3) 
0 
: 
{path_image: "", base_image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…O7/aaFdrXd6na2UApSIJEwod/rWVlSUUk2h2Gbknfi6P/2Q==", slot_id: 1} 
1 
: 
{path_image: "", base_image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…O7/aaFdrXd6na2UApSIJEwod/rWVlSUUk2h2Gbknfi6P/2Q==", slot_id: 2} 
2 
: 
{path_image: "", base_image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…O7/aaFdrXd6na2UApSIJEwod/rWVlSUUk2h2Gbknfi6P/2Q==", slot_id: 3} 
length 
: 
3 
__proto__ 
: 
Array(0) 
__v 
: 
0 
_id 
: 
"59c92d6f45b79c8c110ee6ab" 
__proto__ 
: 
Object 

我的剧本，我试图让数据

我的JavaScript

$scope.GetData = function() { 
     $http({ 
      url: "http://www.site.co.uk/one/two/getdata", 
      method: "POST", 
      date: {}, 
      headers: {'Content-Type': 'application/json'} 
     }).then(function (response) { 
      // success 
      console.log('you have received the data '); 
      console.log(response); 
      // $scope.base_image = response.base_image; $scope.c_name = response.c_name; 
      $scope.c_name = data.c_name; 
      $scope.max_slots = 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（数据）全响应;

you have received the data

{data: Array(1), status: 200, config: {…}, statusText: "OK", headers: ƒ} 
config 
: 
{method: "POST", transformRequest: Array(1), transformResponse: Array(1), url: "http://www.site.co.uk/one/two/getdata", date: {…}, …} 
data 
: 
Array(1) 
0 
: 
c_name 
: 
"ben" 
d_text 
: 
[] 
max_slots 
: 
2 
resolution 
: 
(2) [1920, 1080] 
slots 
: 
[{…}] 
__v 
: 
0 
_id 
: 
"59c92d6f45b79c8c110ee6ab" 
__proto__ 
: 
Object 
length 
: 
1 
__proto__ 
: 
Array(0) 
headers 
: 
ƒ (c) 
status 
: 
200 
statusText 
: 
"OK" 
__proto__ 
: 
Object 

以及相关截屏

Answer 1

$scope.GetData = function() { 
    $http({ 
     url: "http://www.site.co.uk/one/two/getdata", 
     method: "POST", 
     date: {}, 
     headers: {'Content-Type': 'application/json'} 
    }).then(function (response) { 
     // success 
     var data = JSON.parse(response); 
     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.c_name; 
     $scope.max_slots = 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(); 

更换响应数据应该可以解决这个问题。

Answer 2

我理解为你打印JSON数据为我张贴这个答案，如果你不希望这样的回答，请更清楚地张贴您的问题。

$scope.GetData = function() { 
    $http({ 
     url: "http://www.site.co.uk/one/two/getdata", 
     method: "POST", 
     date: {}, 
     headers: {'Content-Type': 'application/json'} 
    }).then(function (response) { 
     // success 
     console.log('you have received the data '); 
     console.log(response); // if the response data is in json 
     console.log(angular.toJson(response)); // if the response data is in json 
     // $scope.base_image = response.base_image; $scope.c_name = response.c_name; 
     $scope.c_name = response.c_name; 
     $scope.max_slots = response.max_slots; 
     $scope.slot_image = response.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();