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

Question

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

Answer 1

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 null s 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 .

Answer 2

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

Answer 3

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

Answer 4

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) 

Answer 5

使用过滤器而不是地图。

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