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

Encountered a runtime error in NgRx 7.4.0: "Uncaught TypeError: ctor is not a

Loading texts with the same color code via ajax will reveal there are differences among them

Displaying various Ajax html responses

What is the process for retrieving the value of a text box using V-Model?

AngularJS $routeProvider is experiencing difficulties with its routing functionality

Leverage the https module within your React Native application

Why does the combination of "minus, space, minus" result in the "plus" operation?

The function crypto.randomUUID() does not exist in the Vitest library

React has reached the maximum update depth limit

Having trouble adding items to an array within a Javascript promise

Retrieve the jQuery widget instance by selecting an element within the widget

The Jquery code encountered an issue where it was unable to access the property 'length' of an undefined

The last javascript file that was included has been overlooked

Is it possible to set all UI forms to a readonly/disable mode?

Having a parameter that contains the characters '&' and '&' can potentially disrupt an AJAX call

Identifying Typescript argument types

"Encountering a problem with compression in Kafka while using the Node.js client with

How can we add a class to a radio button using jQuery when it is checked, and remove the class when it

The div element fails to display even after invoking a JavaScript function to make it visible

Is there a way to automatically hide divs with the style "visibility:hidden" if they are not visible within the viewport?