Split and map array from comma separated string list in angularjs

Question

I want to merge two lists that are comma separated, CENTURY, BADGER & 65, 85 to form an array like: [{name: 'CENTURY', price: '65'}, {name: 'BADGER', price: 85}], the lists are in an json object:

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

So what I've done is a filter:

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
    }
}

I'd like to know how to apply the filter to an interpolation {{ }} so that I could get the array and use it in a ng-repeat, here's where it is used:

<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>

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — JB Nizet
– JB Nizet, Commented Dec 23, 2015 at 21:34

Abdelrahman M. Allam · Accepted Answer · 2015-12-23 22:06:37Z

5

I think if you look for output like this CENTURY, BADGER, EXO you just need to do so

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

I edit this to add filter could help add this filter

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

And your HTML view modified to

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

edited Dec 23, 2015 at 22:06

answered Dec 23, 2015 at 21:47

Abdelrahman M. Allam

92210 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jonathan Solorzano Over a year ago

You misunderstood what I said, I want the opposite of that... I have the string like CENTURY, BADGER, EXO

Abdelrahman M. Allam Over a year ago

you maybe need a to make filter split it

JB Nizet Over a year ago

Why use a filter? Why not simply use brand in p.brands.split(',')?

Abdelrahman M. Allam Over a year ago

brand in p.brands.split(',') is nice, I missed this one

Jonathan Solorzano Over a year ago

I updated the question for a better understanding, check it out

Steve Campbell · Accepted Answer · 2015-12-23 23:44:42Z

3

Array.map is helpful when transforming arrays.

If you have a single of your starting "product", you can make it into an array like this:

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

You could build on that to transform an array of them.

answered Dec 23, 2015 at 23:44

Steve Campbell

3,6452 gold badges34 silver badges44 bronze badges

Comments

Gogodr · Accepted Answer · 2015-12-24 18:45:35Z

0

this should do it:

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
}

answered Dec 24, 2015 at 18:45

Gogodr

11 bronze badge

Comments

Community · Accepted Answer · 2017-05-23 12:01:55Z

Personally I don't prefer filters as a solution for this problem, because as the term defines, its should be used for filtering/selecting the items to display. As Steve Campbell suggests, you should transform/map the products into your desired form. Demo

// 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
    };
});
}

Screech · Accepted Answer · 2019-07-04 10:37:11Z

0

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

After a lot of research, Finally found the solution.

answered Jul 4, 2019 at 10:37

Screech

136 bronze badges

1 Comment

barbsan Over a year ago

That Array.from is redundant, split returns an array. You can also replace i<=arrayDefaultDeliveryDay.length-1 with i<arrayDefaultDeliveryDay.length or even read arrayDefaultDeliveryDay.length before for loop and use i<someVariable

Collectives™ on Stack Overflow

Split and map array from comma separated string list in angularjs

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related