以角度显示 json 数据

Question

我有一个在页面加载时运行的帖子。我正在尝试获取 json 中的数据对象以在我的页面和控制器中使用，因此我试图将值存储在 Angular 范围内。

我不知道我哪里出错了，但我无法获得价值，当我使用 console.log 时，我得到了

angular.js:11655 ReferenceError: 数据未定义

我要收藏

c_name

max_slots

base_image

我需要的总结

我需要将上面列出的数组对象存储在范围变量中，以便我可以在我的 html 和我的 JavaScript 控制器中使用它们。

我的 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(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

我知道您必须打印 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();

Answer 2

    $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();

用数据替换响应应该可以解决问题。