CODEWITHSUNDEEP
javascriptangularjscallbackecmascript-6
Raphael
Raphael

Reputation: 1812

Getting error while adding a conditional check in .map() using ES6 syntax

I need to assign only the object which contains iban value to the list in the below code.I couldn't fix this issue. kindly help.

  this.ibanList = this.data.map(
        (value, index)=> (if(value && value.iban){'id': index, 'text': value.iban}));

The values present inside the data is shown below.

 "data": [
        {

            "id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"
        },
        {
            "iban": "DE45765459080",
            "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"
        },
        {

            "iban": "DE3700333333",
            "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"
        }
    ]

Upvotes: 1

Views: 146

Answers (5)

T.J. Crowder
T.J. Crowder

Reputation: 1075039

Two problems:

  1. The shorthand form of an arrow function must have only an expression on the right-hand side of the =>. You have an if statement instead. (In parentheses, which wouldn't be valid anywhere, even outside an arrow function.)

  2. map always uses the return value. You haven't given any return value for the "else" case.

In this specific case, you can use the conditional operator instead; I'll use null as the return value for the "else" case:

this.ibanList = this.data.map(
    (value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null));


var data = [
  {"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE45765459080", "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE3700333333", "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}
];
var ibanList = data.map(
    (value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null));
console.log(ibanList);

Note, though, that the result will have those nulls in it. If you only want ones where value && value.iban is true, use filter before mapping:

this.ibanList = this.data
    .filter(value => value && value.iban)
    .map((value, index) => ({'id': index, 'text': value.iban}));


var data = [
  {"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE45765459080", "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE3700333333", "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}
];
var ibanList = data
    .filter(value => value && value.iban)
    .map((value, index) => ({'id': index, 'text': value.iban}));
console.log(ibanList);

In that case, I've used filter before mapping, which means that the index value you're using as id may well be different from the original. If you wanted the original value, pre-filtering, you'd filter afterward by combining the two approaches above:

this.ibanList = this.data
    .map((value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null))
    .filter(value => value); // Removes the nulls


var data = [
  {"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE45765459080", "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE3700333333", "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}
];
var ibanList = data
    .map((value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null))
    .filter(value => value); // Removes the nulls
console.log(ibanList);

Did you really mean to replace the id values ("2c4cc5e8-d24d-11e4-8833-150bbf360367" and such) with indexes? If not, replace id: index in the above with id: value.id.

Upvotes: 6

Redu
Redu

Reputation: 26191

No need for map filter combo. This can be done with a single reduce in O(n) time. 

var data = [{"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},{"iban": "DE45765459080","id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},{"iban": "DE3700333333","id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}],
ibanList = data.reduce((p,c,i) =>  (c.iban && p.push({"id": i, "text": c.iban}),p),[]);
console.log(ibanList)

Upvotes: 0

jcubic
jcubic

Reputation: 66590

Try:

    
var data = [{id:1, text: "1", iban: 'foo'}, {id:2, text: "2", iban: 'bar'}, {id:10, text: 20}];
var ibanList = data.filter((value) => value && value.iban).map(
        (value, index) => ({'id': index, 'text': value.iban}));
console.log(ibanList);

Upvotes: 3

Joey Ciechanowicz
Joey Ciechanowicz

Reputation: 3663

For map you need to always return a value, so to get the desired result you would need to filter your list first.

this.ibanList = this.data.filter(value => value && value.iban)
     .map((value, index) => ({id: index, text: value.iban}));

Upvotes: 1

E. Abrakov
E. Abrakov

Reputation: 463

Use filter instead of map. 

this.ibanList = this.data.filter((value, index) => {return value && value.iban});

Upvotes: -1

Related Questions