Incorporate changing keys and fluctuating values into a JavaScript object

Question

Incorporate changing keys and fluctuating values into a JavaScript object

I am trying to create a function in TypeScript that will return an object like this:

    marked = {
      '2024-08-21': {
        dots:[food, recycling]
      },
      '2024-08-22': {
        dots:[food, recycling]
      }
    }

Here is the code I have written so far.

function addKeysAndValuesDynamically(days: string[]): any {
  var marked = {};
  const food = {key: 'food', color: 'brown'};
  const recycling = {key: 'recycling', color: 'green'};
  days.forEach((day: string) => {
    marked[day]['dots'] = food, recycling;
  });
  return marked;
}

var days: string[] = ['2024-08-21', '2024-08-22'];
var marked = addKeysAndValuesDynamically(days);
console.log(`marked = ${marked}`);

However, when I run the code, I receive an error message:

TypeError: Cannot set property 'dots' of undefined

.

typescript react-native

Answer 1

Answer №1

Are you new to TypeScript coming from JavaScript and looking to avoid using types? Here's a way to achieve that with interfaces:

interface KeyColor {
    key: string;
    color: string;
}

interface Marked {
    [day: string]: {
        dots: [KeyColor, KeyColor]
    }
}

function dynamicallyAddKeysAndValuesToDays(days: string[]): Marked {
  const marked: Marked = {};
  const food = {key: 'food', color: 'brown'};
  const recycling = {key: 'recycling', color: 'green'};
  days.forEach((day: string) => {
    marked[day] = { dots: [food, recycling] }
  });
  return marked;
}

var days: string[] = ['2024-08-21', '2024-08-22'];
var marked = dynamicallyAddKeysAndValuesToDays(days);
console.log(marked); // log object properties this way to view content

Check out the code on Playground

Answer 2

Are you new to TypeScript coming from JavaScript and looking to avoid using types? Here's a way to achieve that with interfaces:

interface KeyColor {
    key: string;
    color: string;
}

interface Marked {
    [day: string]: {
        dots: [KeyColor, KeyColor]
    }
}

function dynamicallyAddKeysAndValuesToDays(days: string[]): Marked {
  const marked: Marked = {};
  const food = {key: 'food', color: 'brown'};
  const recycling = {key: 'recycling', color: 'green'};
  days.forEach((day: string) => {
    marked[day] = { dots: [food, recycling] }
  });
  return marked;
}

var days: string[] = ['2024-08-21', '2024-08-22'];
var marked = dynamicallyAddKeysAndValuesToDays(days);
console.log(marked); // log object properties this way to view content

Check out the code on Playground

Incorporate changing keys and fluctuating values into a JavaScript object

Answer №1

Similar questions

Tips for obtaining the accurate HTML code format using Angular 2's input feature:

Please provide TypeScript code for a React wrapper function that augments a component's props with two additional functions

how can I retrieve an array of nested objects from two interrelated tables that have a one-to-many relationship using

How can I enable editing for specific cells in Angular ag-grid?

GUIDE: Creating an Angular library comprised of standalone feature sub-libraries

"In the combined declaration of 'DepartmentListComponent', all individual declarations must either be exported or kept local." - error message regarding routing components in TypeScript file

The name 'console' could not be located

Defining a TypeScript conditional return type that may include undefined

Vercel deployment encountered an AxiosError with a status code of 404

Tips on dividing an Axios request into multiple files in ReactJS?

NestJS WebSocketGateway fails to initialize due to a technical glitch

What is the proper way to define a generic object interface in Typescript?

The functionality of provideRouter and RouterConfig cannot be located in the updated @angular/router version 3.0.0-alpha.3^

Guide on bringing in Javascript file into your Ionic/Angular application

Exploring the inner components of an entity without the need for external tools

What is the best way to access individual items within an *ngFor loop in Angular?

Encountered an eas error during Android build process

Defining optional parameters in TypeScript

Creating a unique Angular 2 Custom Pipe tutorial

Tips for sending data returned asynchronously from an Observable in Angular from a Child component to its Parent