以角度顯示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();