Question 215621 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Unnest Array of Objects and transform nested values to key/value Pairs

The nested array, stats, consists of objects containing key-value pairs.

  • Each key-value pair is an object with two elements: the first element is the property key and the second element is the property value.
  • The goal is for statName and statValue to transformed to key:value pairs in the outermost array of objects.

I’ve identified two JavaScript functions on MDN Web Docs that seemed to be somewhat relevant: Object.formEntries() and Object.entries().

  • The Object.fromEntries() static method transforms a list of key-value pairs into an object.
  • The Object.entries() static method returns an array of a given object’s own enumerable string-keyed property key-value pairs
[
  {
    "playerName": "Chris Kirk",
    "country": "United States",
    "countryFlag": "USA",
    "rank": 35,
    "stats": [
      {
        "statName": "Avg",
        "statValue": "70.356",
      },
      {
        "statName": "Total Strokes",
        "statValue": "5,176",
      },
      {
        "statName": "Total Adjustment",
        "statValue": "30.308",
      },
      {
        "statName": "Total Rounds",
        "statValue": "74",
      }
    ]
  },
  {
    "playerName": "Kevin Yu",
    "country": "Chinese Taipei",
    "countryFlag": "TPE",
    "rank": 36,
    "stats": [
      {
        "statName": "Avg",
        "statValue": "70.386",
      },
      {
        "statName": "Total Strokes",
        "statValue": "3,251",
      },
      {
        "statName": "Total Adjustment",
        "statValue": "57.157",
      },
      {
        "statName": "Total Rounds",
        "statValue": "47",
      }
    ]
  }
]

What I’m trying to achieve.

[
  {
    "playerName": "Chris Kirk",
    "country": "United States",
    "countryFlag": "USA",
    "rank": 35,
    "Avg": "70.356",
    "Total Strokes": "5,176",
    "Total Adjustment":"30.308",
    "Total Rounds": "74"
  },
  {
    "playerName": "Kevin Yu",
    "country": "Chinese Taipei",
    "countryFlag": "TPE",
    "rank": 36,
    "Avg": "70.386",
    "Total Strokes": "3,251",
    "Total Adjustment": "57.157",
    "Total Rounds": "47"
  }
]
Tags:

4

Answers


  1. 0

    You can use map for modify old response and inside map you can loop for states values

    const formattedResponse = originalResponse.map((item) => {
  // Create a new object to store
  const newObj = {
    playerName: item.playerName,
    country: item.country,
    countryFlag: item.countryFlag,
    rank: item.rank,
  };

  // Iterate through the 'stats' array and add the properties to the new object
  item.stats.forEach((stat) => {
    newObj[stat.statName] = stat.statValue;
  });

  return newObj;
});
    Login or Signup to reply.
  2. 0

    What @evolutionxbox says. But here is a solution for your problem:

    const transformedData = data.map((player) => {
  const playerStats = {};
  player.stats.forEach((stat) => {
    playerStats[stat.statName] = stat.statValue;
  });
  delete player["stats"];

  return {
    ...player,
    ...playerStats
  };
});

    Running:

    const data = [{
    "playerName": "Chris Kirk",
    "country": "United States",
    "countryFlag": "USA",
    "rank": 35,
    "stats": [{
        "statName": "Avg",
        "statValue": "70.356",
      },
      {
        "statName": "Total Strokes",
        "statValue": "5,176",
      },
      {
        "statName": "Total Adjustment",
        "statValue": "30.308",
      },
      {
        "statName": "Total Rounds",
        "statValue": "74",
      }
    ]
  },
  {
    "playerName": "Kevin Yu",
    "country": "Chinese Taipei",
    "countryFlag": "TPE",
    "rank": 36,
    "stats": [{
        "statName": "Avg",
        "statValue": "70.386",
      },
      {
        "statName": "Total Strokes",
        "statValue": "3,251",
      },
      {
        "statName": "Total Adjustment",
        "statValue": "57.157",
      },
      {
        "statName": "Total Rounds",
        "statValue": "47",
      }
    ]
  }
]

const transformedData = data.map((player) => {
  const playerStats = {};
  player.stats.forEach((stat) => {
    playerStats[stat.statName] = stat.statValue;
  });
  delete player["stats"];

  return {
    ...player,
    ...playerStats
  };
});

console.log(transformedData);
    Login or Signup to reply.
  3. 0

    Here is a valid solution of your problem

    const unnestData = data.map(d => {
  d.stats.forEach(({statName, statValue}) => d[statName] = statValue)
  delete d.stats
  return d
})
    Login or Signup to reply.
  4. 0 
    const input = [
  {
    "playerName": "Chris Kirk",
    "country": "United States",
    "countryFlag": "USA",
    "rank": 35,
    "stats": [
      {
        "statName": "Avg",
        "statValue": "70.356",
      },
      {
        "statName": "Total Strokes",
        "statValue": "5,176",
      },
      {
        "statName": "Total Adjustment",
        "statValue": "30.308",
      },
      {
        "statName": "Total Rounds",
        "statValue": "74",
      }
    ]
  },
  {
    "playerName": "Kevin Yu",
    "country": "Chinese Taipei",
    "countryFlag": "TPE",
    "rank": 36,
    "stats": [
      {
        "statName": "Avg",
        "statValue": "70.386",
      },
      {
        "statName": "Total Strokes",
        "statValue": "3,251",
      },
      {
        "statName": "Total Adjustment",
        "statValue": "57.157",
      },
      {
        "statName": "Total Rounds",
        "statValue": "47",
      }
    ]
  }
]

const output = input.map(({stats, ...rest}) => ({
    ...rest, 
    ...stats.reduce((acc, {statName, statValue}) => ({
        ...acc, 
        [statName]: statValue
    }), {})
}))

console.log(output)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search