Creating an array of input data for component, implementing data formatting in TypeScript for Angular or React applications

Question

Creating an array of input data for component, implementing data formatting in TypeScript for Angular or React applications

Here is an example of the input for the component. When this input is passed to the component, the output displays correctly.

 const data = [
            ['Rank', 'Player', 'Player', 'Player'],
            ['1', 'sachin', 'dravid', 'ganguly'],
            ['2', 'pointhig', 'mcrath', 'warne'],
            ['3', 'sanath', 'murali', 'vaas'],
            ['4', 'akram', 'younis', 'akhamed'] 
        ]

However, my API response looks like the following. I attempted to convert the API response into the input data format shown above, with the Rank column automatically incrementing. Unfortunately, my conversion attempts were unsuccessful.

0:Array(3)
    0:{fullname:'sachin'}
    1:{fullname:'dravid'}
    2:{fullname:'ganguly'}
1:Array(3)
    0:{fullname:'pointhig'}
    1:{fullname:'mcrath'}
    2:{fullname:'warne'}
2:Array(3)
    0:{fullname:'sanath'}
    1:{fullname:'murali'}
    2:{fullname:'vaas'}
3:Array(3)
    0:{fullname:'akram'}
    1:{fullname:'younis'}
    2:{fullname:'akhamed'}

javascript typescript

Answer 1

Answer №1

const teams = ["Team 1", "Team 2", "Team 3", "Team 4"];
const players = [
  [{ name: "John" }, { name: "Sarah" }, { name: "Mark" }],
  [{ name: "Emily" }, { name: "David" }, { name: "Michael" }],
  [{ name: "Rachel" }, { name: "Peter" }, { name: "Olivia" }],
  [{ name: "Sam" }, { name: "Lily" }, { name: "Tom" }]
];

const lineup = players.map((item, idx) => [
  (idx + 1).toString(),
  ...item.map(x => x.name)
]);
const teamLineup = [...[teams], ...lineup];

console.log(teamLineup);

Answer 2

const teams = ["Team 1", "Team 2", "Team 3", "Team 4"];
const players = [
  [{ name: "John" }, { name: "Sarah" }, { name: "Mark" }],
  [{ name: "Emily" }, { name: "David" }, { name: "Michael" }],
  [{ name: "Rachel" }, { name: "Peter" }, { name: "Olivia" }],
  [{ name: "Sam" }, { name: "Lily" }, { name: "Tom" }]
];

const lineup = players.map((item, idx) => [
  (idx + 1).toString(),
  ...item.map(x => x.name)
]);
const teamLineup = [...[teams], ...lineup];

console.log(teamLineup);

Answer 3

Answer №2

One way to achieve this is by utilizing the nested map() method.

const arrayOfArrays = [[
    {fullname:'sachin'},
    {fullname:'dravid'},
    {fullname:'ganguly'}
],
    [{fullname:'pointhig'},
    {fullname:'mcrath'},
    {fullname:'warne'}],
[{fullname:'sanath'},
{fullname:'murali'},
{fullname:'vaas'}],

[{fullname:'akram'},
{fullname:'younis'},
{fullname:'akhamed'}]]

const result = arrayOfArrays.map((array, index) => [index + 1 ,...array.map(item => item.fullname)]);
console.log(result)

Answer 4

One way to achieve this is by utilizing the nested map() method.

const arrayOfArrays = [[
    {fullname:'sachin'},
    {fullname:'dravid'},
    {fullname:'ganguly'}
],
    [{fullname:'pointhig'},
    {fullname:'mcrath'},
    {fullname:'warne'}],
[{fullname:'sanath'},
{fullname:'murali'},
{fullname:'vaas'}],

[{fullname:'akram'},
{fullname:'younis'},
{fullname:'akhamed'}]]

const result = arrayOfArrays.map((array, index) => [index + 1 ,...array.map(item => item.fullname)]);
console.log(result)

Answer 5

Answer №3

Provided below is a response showcasing varied header sizes

const list = [
  [{
    title: 'apple'
  }, {
    title: 'banana'
  }, {
    title: 'orange'
  }],
  [{
    title: 'blueberry'
  }, {
    title: 'strawberry'
  }, {
    title: 'kiwi'
  }],
  [{
    title: 'grape'
  }, {
    title: 'pear'
  }, {
    title: 'plum'
  }],
];

const output = list.map((item, index) => [
  index + 1,
  ...item.map(subItem => subItem.title),
]);

output.unshift([
  'Index',
  ...[...Array(output[0].length - 1)].map(_ => 'Fruit'),
])

console.log(output);

Answer 6

Provided below is a response showcasing varied header sizes

const list = [
  [{
    title: 'apple'
  }, {
    title: 'banana'
  }, {
    title: 'orange'
  }],
  [{
    title: 'blueberry'
  }, {
    title: 'strawberry'
  }, {
    title: 'kiwi'
  }],
  [{
    title: 'grape'
  }, {
    title: 'pear'
  }, {
    title: 'plum'
  }],
];

const output = list.map((item, index) => [
  index + 1,
  ...item.map(subItem => subItem.title),
]);

output.unshift([
  'Index',
  ...[...Array(output[0].length - 1)].map(_ => 'Fruit'),
])

console.log(output);

Creating an array of input data for component, implementing data formatting in TypeScript for Angular or React applications

Answer №1

Answer №2

Answer №3

Similar questions

Tips for implementing multiple nested routes using Vue.js?

The NextJS App directory consistently stores the retrieved data in the cache, regardless of any no-cache options that may have been configured

Leveraging Arrays with AJAX Promises

What is the best way to initiate a function from within another function while working with ReactJS?

Ways to insert space between tags in jade compiled through webpack

Replacing a div with another div can be achieved in a single swap

Changing the value within a deeply nested object

Troubarked by problems NodeJS faces when trying to establish a connection with CosmosDB using a connection

What is the best way to vertically flip a background image that is repeating along the y axis in CSS?

What are some ways to implement AJAX with input from the user?

Building a table using a JSON object in a React component

Transform an array into an object with assigned key names

Node.js app hosted on Azure Functions unable to resolve NPM dependencies

Anticipated an array but received something else (JSON) - AngularJS Error

Having trouble getting the video to load on your Mozilla Firefox browser?

Method with undefined constructor parameter in Typescript

Can 2D canvas elements make use of CSS shaders?

AngularJS Error: $element.find(...) does not support iteration

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Utilizing jQuery for real-time operations