在angularjs中从逗号分隔的字符串列表中分割和映射数组

Split and map array from comma separated string list in angularjs

本文关键字：分割 列表 映射 数组 字符串 分隔 angularjs      更新时间：2023-09-26

我想合并两个逗号分隔的列表，CENTURY, BADGER&65, 85形成一个类似于：[{name: 'CENTURY', price: '65'}, {name: 'BADGER', price: 85}]的数组，列表在一个json对象中：

{
    unit: '35 lb',
    brands: 'CENTURY, BADGER'
    prices: '65, 85'
}

所以我做的是一个过滤器：

angular
    .module( 'app.purchases.products' )
    .filter( 'mergeDetails', mergeDetails );
function mergeDetails() {
    return function ( product ) {
        _.merge( product.brands, product.prices );//Using lodash, any suggestion?
        console.log('brands ', product.brands);
        return product.brands;//`_.merge` will add prices to brands
    }
}

我想知道如何将滤波器应用于插值{{ }}，这样我就可以获得数组并在ng-repeat中使用它，这里是它的使用位置：

<tr ng-repeat="product in products">
    <td>{{product.unit}}</td>
    <td>
        <!-- Here I should filter to ng-repeat the resulting array -->
        {{product.brands +' '+ product.prices}}
    </td>
</tr>

我认为如果你寻找像CENTURY, BADGER, EXO这样的输出，你只需要这样做

  <li ng-repeat="p in products">
    <p>{{p.brands}}</p>
  </li>

我编辑此以添加筛选器可能会有所帮助添加这个过滤器

 .filter('customSplit', function() {
  return function(input) {
    console.log(input);
    var ar = input.split(','); // this will make string an array 
    return ar;
  };
});

您的HTML视图被修改为

   <li ng-repeat="p in products">
    <p ng-repeat="brand in (p.brands | customSplit)">{{ brand }}{{$last ? '' : ', '}}</p>
  </li>

Array.map在转换数组时很有用。

如果你有一个开始的"产品"，你可以把它做成这样的数组：

var expandedProduct = product.brands.split(',').map(function(brand, index) {
  return {
    'name': product.name,
    'brand': brand.trim(),
    'cost': product.costs.split(',')[index].trim(),
    'vat_cost': product.vat_costs.split(',')[index].trim()
  }
});

你可以在此基础上转换它们的数组。

这应该做到：

var transpose = function(obj){
    var result =[];
    for(key in obj){
        var aux = obj[key].split(",");
        for(i in aux){
            if(result[i]==null){
                result[i]={};
            }
            result[i][key]=aux[i].trim()
        }
    }
    return result
}

就我个人而言，我不喜欢过滤器作为这个问题的解决方案，因为正如这个术语所定义的，它应该用于过滤/选择要显示的项目。正如Steve Campbell建议的那样，你应该将产品转换/映射成你想要的形式。演示

// flatten the pr0ducts into one array ...
vm._products = data.reduce(function (previous, current) {
                        return previous.concat(generateMergeList(current))
                    }, []);
// helper function to generate a list of product in a product data object
function generateMergeList(source) {
var result = [];
if (!source || !source.brands || !source.prices) {
    return result;
}
var _brands = source.brands.split(',');
var _prices = source.prices.split(',');
if (_brands.length !== _prices.length) {
    throw 'Number of items in brands and prices aren''t the same...';
}
return _brands.map(function (elm, idx) {
    return {
        brand : elm,
        price : _prices[idx],
        unit : source.unit
    };
});
}

let arrayDefaultDeliveryDay = Array.from(this.defaultDeliveryDays.split(","));
let arrayDefaultDeliveryFoodType = Array.from(this.defaultDeliveryFoodType.split(","));
let arrayDefaultDeliveryStartTime = Array.from(this.defaultDeliveryStartTime.split(","));
let arrayDefaultDeliveryEndTime = Array.from(this.defaultDeliveryEndTime.split(","));
var deliveryDetails = [];
for(var i = 0; i<=arrayDefaultDeliveryDay.length-1; i++){
  deliveryDetails.push({
    foodType : arrayDefaultDeliveryFoodType[i],
    day : arrayDefaultDeliveryDay[i],
    startTime : arrayDefaultDeliveryStartTime[i],
    endTime : arrayDefaultDeliveryEndTime[i]
  })
}
console.log(JSON.stringify(deliveryDetails));

经过大量的研究，终于找到了解决方案。

相关文章：