ES6 filter all names into one function

Question

I am trying to filter an array of objects and assign multiple variables based on if there is a match or not.

The reason for this, is that I can then use the variable in a string literal, displaying the value.

I have managed to break it down, but I see that I am repeating myself a lot and believe this is not the most efficient way.

Any help would be greatly appreciated.

 let stats = [{name: "goals", value: 5}, {name: "losses", value: 20}, {name: "wins", value: 48}, {name: "draws", value: 23}, {name: "fwd_pass", value: 1533}, {name: "goal_assist", value: 2}, {name: "appearances", value: 80}, {name: "mins_played", value: 6953}, {name: "backward_pass", value: 308}] //const { player , stats } = playerData[0] const appearances = stats.filter(({name} , i) => { return name == "appearances" }); const goals = stats.filter(({name} , i) => { return name == "goals" }); const assists = stats.filter(({name} , i) => { return name == "goal_assist" }); const mins = stats.filter(({name} , i) => { return name == "mins_played" }); const fwdPass = stats.filter(({name} , i) => { return name == "fwd_pass" }); const backPass = stats.filter(({name} , i) => { return name == "backward_pass" }); 

Answer 1

Your approach returns arrays for each variable. An alternative is creating an object which keys are the names. That way, you will be able to access using the name and get the specific object.

 let stats = [{name: "goals", value: 5},{name: "losses", value: 20},{name: "wins", value: 48},{name: "draws", value: 23},{name: "fwd_pass", value: 1533},{name: "goal_assist", value: 2},{name: "appearances", value: 80},{name: "mins_played", value: 6953},{name: "backward_pass", value: 308}], variables = stats.reduce((a, c) => Object.assign(a, {[c.name]: c}), Object.create(null)); console.log(`Access through key: ${variables.fwd_pass.value}`); 

Answer 2

You can create a single function to which you pass the name to filter the data:

 let stats = [{ name: "goals", value: 5 }, { name: "losses", value: 20 }, { name: "wins", value: 48 }, { name: "draws", value: 23 }, { name: "fwd_pass", value: 1533 }, { name: "goal_assist", value: 2 }, { name: "appearances", value: 80 }, { name: "mins_played", value: 6953 }, { name: "backward_pass", value: 308 } ] const fnFilter = (name) => stats.find(x => x.name == name) console.log(fnFilter('appearances')) console.log(fnFilter('backward_pass')) 

Or you can create an object map and access by key:

 let stats = [{ name: "goals", value: 5 }, { name: "losses", value: 20 }, { name: "wins", value: 48 }, { name: "draws", value: 23 }, { name: "fwd_pass", value: 1533 }, { name: "goal_assist", value: 2 }, { name: "appearances", value: 80 }, { name: "mins_played", value: 6953 }, { name: "backward_pass", value: 308 } ] const index = stats.reduce((r,c) => (r[c.name] = c, r), {}) console.log(index['appearances']) console.log(index['backward_pass']) 

Answer 3

The code will be a lot shorter if you use an object and assign the names as properties. It will always be longer if you want to camel case your variables or properties. Unless you use regular expressions or string manipulations to dynamically convert your name values into camelCase. But that's unnecessary stretch

 let stats = [{name: "goals", value: 5}, {name: "losses", value: 20}, {name: "wins", value: 48}, {name: "draws", value: 23}, {name: "fwd_pass", value: 1533}, {name: "goal_assist", value: 2}, {name: "appearances", value: 80}, {name: "mins_played", value: 6953}, {name: "backward_pass", value: 308}] //const { player , stats } = playerData[0] const statsObj = {}; stats.forEach((item) => { statsObj[item.name] = item; } ); console.log(statsObj.wins); //outputs {name: "wins", value: 48} console.log(statsObj.wins.value); //48