Javascript map 2 arrays into 1 Object

Question

I have to arrays (Name and State Array) and map them togther into one object with the attrbiutes name and state.

Array Name:

 ["Time", "Riskchanged", "Scope", "Risk4", "Test", "Test(2)"]

Array State:

 ["In Bearbeitung", "Abgeschlossen", "In Bearbeitung", "Abgeschlossen", "Geplant", "In Bearbeitung"]

Function:

this.testArr = this.riskNamesArr.map( (x, i) => {
    return {"name": x, "state": this.riskWorkflowStateArr[i]}        
});

This works perfect on all Desktop Browsers but unfortunately not on my iOS Safari Browser.. The mobile Browser just shows nothing if I add those lines..

So is there another approach to get the same result?

Solution 1

I think thats a problem with the arrow-function - thats ES6-style. Try using a simple function:

testArr = riskNamesArr.map( function(x, i){
    return {"name": x, "state": riskWorkflowStateArr[i]}        
}.bind(this));

JSFiddle: https://jsfiddle.net/urbr49d3/

Solution 2

Safari for iOS does not yet support arrow functions () => {}. Use a normal function function() {} instead:

var riskWorkflowStateArr = this.riskWorkflowStateArr;
this.testArr = this.riskNamesArr.map(function(x, i) {
    return {"name": x, "state": riskWorkflowStateArr[i]}        
});

More about arrow functions.

Edit: Changed invalid this reference.