【问题标题】:Getting the values of a returned JSON object in angular js在 Angular js 中获取返回的 JSON 对象的值
【发布时间】:2016-04-15 08:12:35
【问题描述】:

我是 angular 和 node.js 的新手。

基本上,我有一个项目表,在每一行中,都有一个按钮单击。 如果我单击编辑按钮,详细信息应显示在其相应的文本框中进行编辑。

router.route('/contacts/getone/:pk')
    .get(function(req, res, next){
        pg.connect(connectionString, function(err, client, done) {
            //var id = {pk:req.body.pk};
            var contacts = [];
            console.log("get1");
            console.log(req.params.pk);
            var query = client.query("select * from contacts where pk=($1)", [req.params.pk]);
            query.on('row', function(row) {
                contacts.push(row);
               });
               query.on('end', function() {
                done();
                return res.json(contacts);
            });
        });
    });

这是我的角度控制器代码。

$scope.editContact = function(id) {
        contact.getone(id)
        .success(function(data) {

                $scope.contactlist = data;
                //console.log("geone");
                //document.getElementById("fname").value = $scope.contactlist.firstname;
                //console.log("getall");
                //console.log($scope.contactlist.firstname);
                //console.log(data["firstname"]);
                $scope.formData.firstname = $scope.contactlist.firstname;
                $scope.formData.lastname = $scope.contactlist.lastname;
                $scope.formData.address = $scope.contactlist.address;
                $scope.formData.contact = $scope.contactlist.contact;
//                $scope.loading = false;
            });
    };

谁能告诉我如何访问我的 node.js 代码返回的数据中的值?我在 Angular 中的代码返回未定义的值,例如 $scope.contactlist.firstname 是未定义的。

这是我做console.log(data);时的图片

【问题讨论】:

  • success回调中检索到什么data
  • 基本上是名字、姓氏、电子邮件和联系方式。通过执行 console.log(data);价值是这样的。 $$hashKey: "008" contact_num: 123 email: "a@gmail.com" firstname: "boy" lastname: "kigwa" pk: 2
  • 现在,我的问题是,如何在成功回调中检索对象数据的值?

标签: html angularjs node.js


【解决方案1】:

您必须将formData 定义为对象({}) 否则$scope.formData 将是undefined 并且您不能设置未定义的属性

从 api 接收的数据不是object,而是array。获取row后需要返回数据

服务器端

router.route('/contacts/getone/:pk')
  .get(function(req, res, next) {
    pg.connect(connectionString, function(err, client, done) {
      var query = client.query("select * from contacts where pk=($1)", [req.params.pk]);
      query.on('row', function(row) {
        return res.json(row);
      });
    });
  });

客户端

var data = {
  $$hashKey: "008",
  contact_num: 123,
  email: "a@gmail.com",
  firstname: "boy",
  lastname: "kigwa",
  pk: 2
};
$scope.formData = {};
$scope.contactlist = data;
$scope.formData.firstname = $scope.contactlist.firstname;
$scope.formData.lastname = $scope.contactlist.lastname;
$scope.formData.address = $scope.contactlist.address;
$scope.formData.contact = $scope.contactlist.contact;
alert(JSON.stringify($scope.formData));

【讨论】:

  • 已经定义好了。只是没有将其包含在 sn-p 中。 .controller('contactController', ['$scope', '$http', 'contact', function($scope, $http, contact) { $scope.formData = {};
  • 问题不是 $scope.formData.firstname 而是 $scope.contactlist.firstname 未定义。请看下图,了解我执行 console.log(data); 时数据的样子;谢谢
【解决方案2】:

@Rayin Dabre ----这是我的控制器的代码。

angular.module('ContactsControl', [])

.controller('contactController', ['$scope', '$http', 'contact', function($scope, $http, contact) {
	$scope.formData = {};
	
	contact.get()

			.success(function(data) {
				console.log("getall");
				$scope.contactlist = data;
//				$scope.loading = false;
			});
	$scope.editContact = function(id) {
		contact.getone(id)
		.success(function(data) {

				$scope.contactlist = data;
				//console.log("geone");
				//document.getElementById("fname").value = $scope.contactlist.firstname;
				console.log(data);
				//console.log($scope.contactlist.firstname);
				//console.log(data["firstname"]);
				$scope.formData.firstname = $scope.contactlist.firstname;
				$scope.formData.lastname = $scope.contactlist.lastname;
				$scope.formData.address = $scope.contactlist.address;
				$scope.formData.contact = $scope.contactlist.contact;
//				$scope.loading = false;
			});
	};

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-25
    • 2019-11-11
    • 2016-06-10
    • 1970-01-01
    相关资源
    最近更新 更多