Question

问题非常简单。我觉得愚蠢的问这个因为我确定答案就在我面前，但无论如何这里是个问题。

我收到了一个响应数据，JSON有点像这样：

$scope.testData = [
        {
            food: 'wet',
            animal: [{name: 'cat', value: '1'},
                    {name: 'dog', value: '2'}]
        },
        {
            food: 'dry',
            animal: [{name: 'bird', value: '3'},
                    {name: 'fish', value: '4'}]
        }
    ];

手头的问题是我如何在动物下拉嵌套物体，这样我就可以设置一个弦并用当前食物对象推动它，例如：

我会拿出动物：名字所以在food: 'wet'的对象下我会拿出动物：

[{name: 'cat', value: '1'},
 {name: 'dog', value: '2'}]

然后我将对象名称'cat'和'dog'放入像cat，dog这样的字符串中，然后将新值推送到一个看起来像这样的新对象数组

$scope.newData = [
        {
            food: 'wet',
            animalType: 'cat, dog'
        },
        {
            food: 'dry',
            animalType: 'bird, fish'
        }
    ];

这一切都完成了所以我可以有一个更清洁的ui网格

Answer 1

使用Array.prototype.map()方法：

  $scope.newData = $scope.testData.map(function(obj){
    return {
      food: obj.food,
      animal: obj.animal.map(function(a){
        return a.name;
      }).join(', ') // special shout out to @vanev_ for making it a comma separated list
    }
  });

  console.log($scope.newData);

Answer 2

您已经将问题分解为步骤真的很棒，现在我们只需要了解可以用来将这些步骤转换为代码的工具！

首先，我们希望在此集合中每次都运行相同的操作并返回一个全新的集合。这称为map。

我们可以通过写一下data来映射：

data.map((item) => { .. });

这将返回一个全新的集合，其中每个项目都是将data中的项目传递给map的函数的结果。

接下来，我们想要使用animal集合并使用map将其从集合转换为新集合，然后将join新集合转换为单个值，即字符串。

我们可以通过写一下animal来执行此操作：

animal.map((item) => { .. }).join(', ');

这将返回一个字符串，与您提供给join的任何内容一起加入。

让我们来看看下面的最终代码。

const data = [
  {
    food: 'wet',
    animal: [
      {
        name: 'cat',
        value: '1'
      },
      {
        name: 'dog',
        value: '2'
      }
    ]
  },
  {
    food: 'dry',
    animal: [
      {
        name: 'bird',
        value: '3'
      },
      {
        name: 'fish',
        value: '4'
      }
    ]
  }
];

const finalData = data.map((item) => {
  return {
    food: item.food,
    animalType: item.animal.map((item) => {
      return item.name;
    }).join(', ')
  };
});

Answer 3

您可以使用数组上的map方法执行此类操作。它看起来像这样。

var data = [
  {
    food: 'wet',
    animal: [{name: 'cat', value: '1'},
                    {name: 'dog', value: '2'}]
  },
  {
    food: 'dry',
    animal: [{name: 'bird', value: '3'},
                    {name: 'fish', value: '4'}]
  }
];

var newData = data.map((item) => {
  var animalTypes = item.animals.map(animal => {
    return animal.name;
  };
  return {
    food: item.food,
    animalTypes: animalTypes
  };
}, []);

这只是vanilla JS，但这在Angular中应该是一样的。如果您是map函数的新手，可以在这里写一篇很好的文章来解释https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter

Answer 4

您可以创建一个过滤器，这样您就可以在整个应用程序中重用代码。根据您的需要，过滤器实现可能会有所不同。这里我展示了一个选项，下面有一个完整示例的片段：

过滤：

.filter('myFilter', function () { return function (data, key, keyInKey, replacement) { if (data && angular.isArray(data)) { var aux; angular.forEach(data, function(obj){ aux = ""; if(obj[key]){ angular.forEach(obj[key], function(objInObj){ if(objInObj[keyInKey]){ aux += objInObj[keyInKey] + ", "; } }); delete obj[key]; obj[replacement] = aux.substring(0, aux.length - 2); } }); } return data; } })

<强>段

angular.module('myapp', []) .controller('foo', function($scope) { $scope.testData = [{ food: 'wet', animal: [{ name: 'cat', value: '1' }, { name: 'dog', value: '2' }] }, { food: 'dry', animal: [{ name: 'bird', value: '3' }, { name: 'fish', value: '4' }] }]; }) .filter('myFilter', function() { return function(data, key, keyInKey, replacement) { if (data && angular.isArray(data)) { var aux; angular.forEach(data, function(obj) { aux = ""; if (obj[key]) { angular.forEach(obj[key], function(objInObj) { if (objInObj[keyInKey]) { aux += objInObj[keyInKey] + ", "; } }); delete obj[key]; obj[replacement] = aux.substring(0, aux.length - 2); } }); } return data; } });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myapp"> <div ng-controller="foo"> <div ng-repeat="it in testData | myFilter:'animal':'name':'animalType'"> <label>Food:</label> <span ng-bind="it.food"></span> <br/> <label>Animal type:</label> <span ng-bind="it.animalType"></span> <br/> <br/> </div> </div> </div>

Answer 5

这将返回您所追求的结构，其中animalType值是一串动物，而不是数组。

var testData = [
    {
        food: 'wet',
        animal: [{name: 'cat', value: '1'},
                {name: 'dog', value: '2'}]
    },
    {
        food: 'dry',
        animal: [{name: 'bird', value: '3'},
                {name: 'fish', value: '4'}]
    }
];

var newData = [];

for (var i=0;i < testData.length; i++) {

  var animalType = '';

  for (var j=0; j < testData[i]['animal'].length; j++) {
    animalType += testData[i].animal[j].name += ' ';
  }

  newData.push({
    food: testData[i].food,
    animalType: animalType
  });


}

console.log(newData);

如何从JS

5 个答案: