AngularJS如何格式化数组

Question

我正在开发一个读取 excel 文件并将其内容上传到 ui.grid 的应用程序。 那部分工作得很好。 我还需要创建第二个具有相同数据但目的不同的数组，用于第 3 方 api 调用。

数组需要有这种格式：

{
  "users": [
    {
      "name": "frank",
      "email": "frank@email.com"
    },
    {
      "name": "mike",
      "email": "mike@email.com"
    }
  ]
}

目前我的数组看起来像：

data: Array(5)
    0:
        Email: "janderson@email.com"
        Name: "Jack Anderson"
    1:
        Email: "ejohnson@email.com"
        Name: "Ed Johnson"
    2:
        Email: "dpoole@email.com"
        Name: "Dead Poole"
    3:
        Email: "hschmidt@email.com"
        Name: "Hank  Schmidt"
    4:
        Email: "salves@email.com"
        Name: "Steven Alves"

我正在使用的代码：

$scope.arr = new Array;

// SEND THE FILES.
$http(request)
    .then(function (data) {

        angular.forEach(data.data, function (item) {
            var b = {
                Name: item.Name,
                Email: item.Email
            };

            $scope.arr.push(b);
        });

    }).error(function (error) { });
}
$scope.gridData = { data: 'arr' }; 

如何更改代码或添加代码，以创建符合我需要的格式的数组？

感谢您的帮助。 伊拉斯莫

更新

这是我添加推荐后的代码

.controller('myController', function ($http) {

    var formdata = new FormData();
    var vm = this;

    vm.getTheFiles = function ($files) {
        angular.forEach($files, function (value, key) {
            formdata.append(key, value);
        });
    };

    // SEND FILES TO THE API USING POST METHOD.
    vm.uploadFiles = function () {

        var request = {
            method: 'POST',
            url: '/api/fileupload/',
            data: formdata,
            headers: {
                'Content-Type': undefined
            }, transformRequest: angular.identity
        };

        vm.arr = new Array;

        // SEND THE FILES.
        $http(request).then(function (data) {

                angular.forEach(data.data, function (item) {
                    var b = {
                        name: item.Name,
                        email: item.Email
                    };

                    vm.arr.push(b);
                });
        }).catch(function (error) {
            console.log("Error: " + error);
        });

        var items = vm.arr.map((item) => {
            return {
                name: item.name,
                email: item.email
            };
        });

        var panelists = {
            "panelists": items
        }
        console.log(panelists);

    }

    vm.gridData = { data: 'arr' };

Answer 1

我猜你使用的是旧版本的 Angular。所以我使用 vanilla JavaScript

您可以创建一个函数$scope.getGridData 只是为了将您的数据转换为您想要的输出

$scope.arr = [];

// function that transforms your response data to gridData

$scope.getGridData = function(data) {
  if (!data) {
    return [];
  }
  var returnData = [];

  for (var i = 0; i < data.data.length; i++) {
    returnData.push({ name: data[i].Name, email: data[i].Email });
  }

  return { users: returnData };
};


// Your http request
$http(request).then(function(data) {
  // your current array
  $scope.arr = data.data;

  // your transformed grid data is assigned to gridData
  $scope.gridData = $scope.getGridData(data.data);
}).error(function (error) { });

您需要在 then 块内为 $scope.arr 和 $scope.gridData 分配值，因为在 http 请求解决之前，data 不可用。

所以现在你有$scope.arr 作为你当前的数组。

你有 $scope.gridData 有你的转换数据

Answer 2

在循环之后，您可以使用Array.map() 将数组对象的键重命名为全部小写，然后您可以将该数组作为“用户”属性放入一个新对象中：

var foo = $scope.arr.map((item) => {
    return {
        name: item.name;
        email: item.email;
    };
});

var bar = {
    "users": foo
}

当然，重命名这些变量以更准确地反映它们的用途。

如果只需要提供名字，则需要在空格处分割字符串：

item.name.split(' ')[0];

要考虑的另一种方法是在原始循环中将属性Email 和Name 重命名为email 和name，以便格式相同并且您可以重复使用相同的数组。如果将此对象传递到设置为查找大写名称的网格，则可能需要重新配置它以适应此更改。这看起来像：

angular.forEach(data.data, function (item) {
    var b = {
        name: item.Name,
        email: item.Email
    };

    $scope.arr.push(b);
});

无论您需要对第三方端点进行什么调用，您都可以以类似的方式动态添加此数组：

someThing.doThing({
    "users": $scope.arr;
});