The operation to assign a value to property 'two' cannot be completed as it is currently undefined

Question

The operation to assign a value to property 'two' cannot be completed as it is currently undefined

I'm facing an issue with the code below and cannot figure out why I am encountering the error message. I have ensured that each object contains a value, so why is there a reference to 'undefined'?

Cannot set property 'two' of undefined

interface FakeObj {
  one: string | null;
  two: string | null;
  three: string | null;
}

const objectOne: FakeObj[] = [
   {
     one: null,
     two: "Two",
     three: null
   }
];

const objectTwo: FakeObj[] = [
   {
     one: "One",
     two: null,
     three: "Three"
   }
];

const newObject = objectOne.map((search, index) => {
  return Object.entries(search).reduce((acc, [key, value]) => {
    acc[key] = !value && objectTwo.length > index ? objectTwo[index][key] : value;
  }), {};
});

console.log(newObject);

UPDATED: After updating the code, I encountered new issues:

Cannot set property 'two' of undefined

Cannot create property 'two' on string 'One'

javascript typescript

Answer 1

Answer №1

To start, it is important to define the objects as an array:

const objectOne: FakeObj[] = [
  {
    one: null,
    two: "Two",
    three: null
  }
];

Make sure to use const objectOne: FakeObj[] instead of just const objectOne: FakeObj.

Regarding the issue with undefined, ensure that you are returning a value from the reduce function so that acc is not undefined on subsequent calls.

Similarly, remember to return inside your map function to prevent the final log from displaying just [undefined].

Consider using this revised code snippet (although it may require further understanding of your objective):

const newObject = objectOne.map((search, index) => {
  return Object.entries(search).reduce((acc, [key, value]) => {
    acc[key] = !value && objectTwo.length > index ? objectTwo[index][key] : value;

    return acc;
  },{})
});

console.log(newObject);

Response for additional query in the comments:

const newObject = objectOne.map((search, index) => {
  return Object.entries(search).reduce((acc: FruitObj, [key, value]) => {
    acc[key as keyof FruitObj] = !value && objectTwo.length > index ? objectTwo[index][key as keyof FruitObj] : value;

    return acc;
  },{one: null, two: null, three: null})
});

Answer 2

To start, it is important to define the objects as an array:

const objectOne: FakeObj[] = [
  {
    one: null,
    two: "Two",
    three: null
  }
];

Make sure to use const objectOne: FakeObj[] instead of just const objectOne: FakeObj.

Regarding the issue with undefined, ensure that you are returning a value from the reduce function so that acc is not undefined on subsequent calls.

Similarly, remember to return inside your map function to prevent the final log from displaying just [undefined].

Consider using this revised code snippet (although it may require further understanding of your objective):

const newObject = objectOne.map((search, index) => {
  return Object.entries(search).reduce((acc, [key, value]) => {
    acc[key] = !value && objectTwo.length > index ? objectTwo[index][key] : value;

    return acc;
  },{})
});

console.log(newObject);

Response for additional query in the comments:

const newObject = objectOne.map((search, index) => {
  return Object.entries(search).reduce((acc: FruitObj, [key, value]) => {
    acc[key as keyof FruitObj] = !value && objectTwo.length > index ? objectTwo[index][key as keyof FruitObj] : value;

    return acc;
  },{one: null, two: null, three: null})
});

The operation to assign a value to property 'two' cannot be completed as it is currently undefined

Answer №1

Response for additional query in the comments:

Similar questions

Tips for transmitting variable values through a series of objects in a collection: [{data: }]

Error: Unexpected top-level property "import/order" in ESLINT configuration

retrieve a nested object's property using a dynamic string

Getting just the main nodes from Firebase using Angularfire

Tips for consolidating all functions into a single file for ReactJS inheritance:

Ensuring the accuracy of user input

Experiencing difficulty accessing the response header in Angular 16 due to CORS restrictions

Bandcamp API sales data retrieval feature

Error: Cannot access the length property of an undefined value in the JEST test

Tinymce editor does not display icons as expected

Root scope digest trigger delay

Concealing URL parameters in ui-sref (using ui.router)

Can a unique intrinsic type be created from scratch?

Transforming a PHP cURL call to node.js

Tips on manually refreshing AngularJS view using ControllerAs syntax?

Numerous navigable tabs all on a single page

How can an external style sheet be inserted into an iframe?

Ways to address the issue of "$ is not a function"

Applying a Typescript Generic to enhance the functionality of the API fetcher

Node unable to interpret accented characters from CSV file input