JavaScript Mapping Object To Array

Question

I would like to convert objects in JavaScript, but I'm not really sure of the best way to do it. I don't often code in the language so I don't really know much of the fundamentals- this is the object I get back from an API call in a React project:

{
    "api": {
        "results": 380,
        "fixtures": [
            {
                "fixture_id": 65,
                "league_id": 2,
                "league": {
                    "name": "Premier League",
                    "country": "England",
                    "logo": "https://media.api-sports.io/football/leagues/2.png",
                    "flag": "https://media.api-sports.io/flags/gb.svg"
                },
                "event_date": "2018-08-10T19:00:00+00:00",
                "event_timestamp": 1533927600,
                "firstHalfStart": 1533927600,
                "secondHalfStart": 1533931200,
                "round": "Regular Season - 1",
                "status": "Match Finished",
                "statusShort": "FT",
                "elapsed": 90,
                "venue": "Old Trafford (Manchester)",
                "referee": null,
                "homeTeam": {
                    "team_id": 33,
                    "team_name": "Manchester United",
                    "logo": "https://media.api-sports.io/football/teams/33.png"
                },
                "awayTeam": {
                    "team_id": 46,
                    "team_name": "Leicester",
                    "logo": "https://media.api-sports.io/football/teams/46.png"
                },
                "goalsHomeTeam": 2,
                "goalsAwayTeam": 1,
                "score": {
                    "halftime": "1-0",
                    "fulltime": "2-1",
                    "extratime": null,
                    "penalty": null
                }
            }
        ]
    }
}

I would like to convert it to this array (the array holds multiple objects):

[
    {
        "homeTeam": {
            "id": 33,
            "name": "Manchester United",
            "teamId": 33
        },
        "awayTeam": {
            "id": 46,
            "name": "Leicester",
            "teamId": 46
        },
        "outcome": {
            "goalsScoredByAwayTeam": 2,
            "goalsScoredByHomeTeam": 1
        },
        "resulted": true,
        "type": "LEAGUE"
    }
]

The teamId and id actually need to lookup another object before the final output.

I'm not sure what the best way to do it is. This is my function so far, trying to make use of optional chaining:

  function convertFixturesToArray() {

    fixturesStore.getFixtures()?.api?.fixtures?.length ? fixtures.api.fixtures.map(fixture => (
      
       //TRANSFORMATION GOES IN HERE
    
     )) : null;

  }

Why would you need an array holding single object? Where does `resulted` and `type` come from? — Yevhen Horbunkov, Jul 20 '20 at 14:25
Looks like you're trying to do more than just convert the key/value pairs to an array. You are also adding properties like `"type": "LEAGUE"`, is that part of your question? — Neil, Jul 20 '20 at 14:25
Sorry, I should have mentioned `resulted` and `type` are hardcoded. — clattenburg cake, Jul 20 '20 at 14:26
Does this answer your question? [How to convert an Object {} to an Array \[\] of key-value pairs in JavaScript](https://stackoverflow.com/questions/38824349/how-to-convert-an-object-to-an-array-of-key-value-pairs-in-javascript) — Neil, Jul 20 '20 at 14:26
@YevgenGorbunkov The array actually holds multiple objects, I'll add that. — clattenburg cake, Jul 20 '20 at 14:30

Boris Bezzola · Accepted Answer · 2020-07-20T14:37:17.603

2

You seem on the right track. It should be something like this (written in a slightly more modern JS)

  convertFixturesToArray = () => fixturesStore.getFixtures()?.api?.fixtures?.map?.(fixture => {
      
    //Do whatever check you need here with the fixture object
    return {
        homeTeam: { ...fixture.homeTeam },
        awayTeam: { ...fixture.awayTeam },
        outcome: { 
            goalsScoredByAwayTeam: fixture.goalsAwayTeam,
            goalsScoredByHomeTeam: fixture.goalsHomeTeam,
        },
        type: 'LEAGUE',
        resulted: true,
    },
    
    }) ?? [];

edited Jul 20 '20 at 14:37

answered Jul 20 '20 at 14:35

Boris Bezzola

119
5

this may be an answer, however do you think you can use javascript `reduce` method ? – BARNOWL Jul 20 '20 at 14:37
I don't think that this is the case to use the reduce function. The reduce function tries to reduce an array to a single value, while here we are trying to transform the values in an array to another array: each element in the fixture array will be mapped to an element in the result array. – Boris Bezzola Jul 20 '20 at 14:39
hmmm i see, i see. – BARNOWL Jul 20 '20 at 14:39

score 1 · Answer 2 · answered Jul 20 '20 at 14:47

It looks like you're trying to get certain key/value pairs from your api response. With a mix of map, reduce, and find, you can get the values you're looking for by defining them in an array (i.e. desiredProps).

Of course, adding the "outcome" field and your other hardcoded fields would require a bit more logic on top of this. Boris' answer addresses this problem. I've taken a more flexible approach.

let apiResult = {
  "fixtures": [
    {
      "prop1": "a1",
      "prop2": "a2",
      "prop3": "a3"
    },
    {
      "prop1": "b1",
      "prop2": "b2",
      "prop3": "b3"
    }
  ]
}

let desiredProps = ["prop2", "prop3"]

let result = apiResult.fixtures.map(x => {
  return Object.keys(x).reduce((acc, curr) => {
    if (desiredProps.find(y => y === curr)) {
      acc[curr] = x[curr]
    }
    return acc
  }, {})
})

console.log(result)

JavaScript Mapping Object To Array

2 Answers2