Transforming an array into an indexed object using Typescript

Question

Transforming an array into an indexed object using Typescript

I have a specific type of array that I need to convert into an indexed object with corresponding types.

interface IArray {
   id: "message1" | "message2" | "message3";
   message: string;
}

const myArray: IArray[] = [
   {
      id: "message1",
      message: "Here is your message 1"
   },
   {
      id: "message2",
      message: "Here is your message 2"
   }
]

To achieve this, I want to write a function that transforms the array into an object structured like this:

const myObject = {
   message1: "Here is your message 1",
   message2: "Here is your message 2"
}

The challenge I'm facing is that the resultant myObject ends up having the generic type any, but I intend for it to have keys indexed based on the id type defined in the array.

javascript arrays json typescript types

Answer 1

Answer №1

let messages = [{id: "1", text: "This is message 1"},{id: "2", text: "This is message 2"}]
const result = messages.reduce((accumulator, currentValue) => {
  accumulator[currentValue.id] = currentValue.text;
  return accumulator;
}, {});
console.log(result);

Answer 2

let messages = [{id: "1", text: "This is message 1"},{id: "2", text: "This is message 2"}]
const result = messages.reduce((accumulator, currentValue) => {
  accumulator[currentValue.id] = currentValue.text;
  return accumulator;
}, {});
console.log(result);

Answer 3

Answer №2

To achieve this, you can utilize the forEach method:

JavaScript Example:

let myArray = [{
    id: "message1",
    message: "Here is your message 1"
  },
  {
    id: "message2",
    message: "Here is your message 2"
  }
];
let myObject = {};
myArray.forEach(item => {
  myObject[item.id] = item.message;
});
console.log(myObject);

TypeScript Example:

interface IArray {
  id: "message1" | "message2" | "message3";
  message: string;
}
const myArray: IArray[] = [{
    id: "message1",
    message: "Here is your message 1"
  },
  {
    id: "message2",
    message: "Here is your message 2"
  }
];
let myObject: any = {};
myArray.forEach(item => {
  myObject[item.id] = item.message;
});
console.log(myObject);

Answer 4

To achieve this, you can utilize the forEach method:

JavaScript Example:

let myArray = [{
    id: "message1",
    message: "Here is your message 1"
  },
  {
    id: "message2",
    message: "Here is your message 2"
  }
];
let myObject = {};
myArray.forEach(item => {
  myObject[item.id] = item.message;
});
console.log(myObject);

TypeScript Example:

interface IArray {
  id: "message1" | "message2" | "message3";
  message: string;
}
const myArray: IArray[] = [{
    id: "message1",
    message: "Here is your message 1"
  },
  {
    id: "message2",
    message: "Here is your message 2"
  }
];
let myObject: any = {};
myArray.forEach(item => {
  myObject[item.id] = item.message;
});
console.log(myObject);

Transforming an array into an indexed object using Typescript

Answer №1

Answer №2

Similar questions

Attempting to fetch JSON data using jQuery

What causes React to update the value of a read-only prop?

Exploring the world of dynamic routing in Angular using JSON data

Monitor checkbox status to trigger confirmation dialog

Why does Laravel DatePicker consistently default to showing the previous month instead of the selected month?

Error: The Vue prop being passed to the component is not recognized

How to extract audio array buffer using inputBuffer.getChannelData in HTML5 Audio API

Combining Two JSON Arrays Featuring Unique Keys

Leveraging a single jquery ajax request to handle various loops

What is the best way to activate a jQuery function using a dropdown menu?

Transferring data from an array to a view in an Android application

Storing a new field without saving mongoose.Types.ObjectId as a database column in MongoDB

Determine if I'm actively typing in the input field and alter the loader icon accordingly with AngularJS

The .slice() function in TypeScript has the ability to alter the initial array

Access both the key and value during iteration with foreach

Using Jquery select2 to transfer and fetch information

Ways to center align text in a div vertically

Navigating safely with the v-model directive in Vue.js

I am interested in implementing a "slide up" effect for the "slide menu" when it loses focus

What is the process for parsing JSON data using PHP?