How to Resolve Typeerror: Cannot Convert Undefined or Null to Object

How to resolve TypeError: Cannot convert undefined or null to object

Generic answer

This error is caused when you call a function that expects an Object as its argument, but pass undefined or null instead, like for example

Object.keys(null)
Object.assign(window.UndefinedVariable, {})

As that is usually by mistake, the solution is to check your code and fix the null/undefined condition so that the function either gets a proper Object, or does not get called at all.

Object.keys({'key': 'value'})
if (window.UndefinedVariable) {
    Object.assign(window.UndefinedVariable, {})
}

Answer specific to the code in question

The line if (obj === 'null') { return null;} // null unchanged will not
evaluate when given null, only if given the string "null". So if you pass the actual null value to your script, it will be parsed in the Object part of the code. And Object.keys(null) throws the TypeError mentioned. To fix it, use if(obj === null) {return null} - without the qoutes around null.

TypeError: Cannot convert undefined or null to object in react

Because the data would not be loaded at the time of rendering. Which will leads to an exception wile trying to access books[0]

Write a condition like this,

{books.length>0&&
 <tr>
        <th></th>
        {Object.keys(books[0]).map((item) => {
          return <th key={item}>{item}</th>;
        })}
      </tr>
}

Server Error : TypeError: Cannot convert undefined or null to object

Ensure your NEXTAUTH_URL=http://localhost:3000 not https://localhost:3000

TypeError: Cannot convert undefined or null to object in Ionic/Angular

You seem to be correct about your analysis that might be causing the issue.

You will encounter the TypeError: Cannot convert undefined or null to object while trying to pass null or undefined values when the function expects an Object. In your case there are several code snippets that may result in the error:

Object.keys(this.receiveData)
Object.values(this.receiveData)
Object.values(this.cryData)

This is how i defined it in export class code private receiveData: any;, i've tried changing any to any[] and to string, i've tried some few other method to fix it but didn't work out

Simply specifying the Typescript type for the variables won't resolve the issue. You actually need to ensure that the value you are passing to Object.keys() and Object.values() is neither null nor undefined.

Cannot convert undefined or null to object Angular

The cannot convert undefined or null to object Angular error is occurred when you try Object.keys(null). So you can check the object you want to pass to object.keys.

But

It seems you want to show some data in your html based on key/value, so there is a keyvalue pipe for this purpose and no need to extra code such as totoa methods.

And for hiding empty value simply use [hidden]

<div *ngFor="let item of testObject | keyvalue" [hidden]="item.value.length == 0">
    Key: <b>{{item.key}}</b>

    <div *ngFor="let item1 of item.value">
        Value: <b>{{item1}}</b>
    </div>
    <br>
</div>

Here is working sample

The result:

Uncaught TypeError: Cannot convert undefined or null to object error when using fullCalendar

I think basically the issue is that the $.ajax({ command needs to be inside the $('#submit').click(function () { ... }) area. Otherwise it'll run the AJAX command as soon as the selection is made without waiting for the user to enter anything or submit the form.

So that means the variables declared inside that click area, which the AJAX is trying to rely on, won't exist yet, and that would explain the error about "undefined" variables.

It should look like this instead:

select: function(start, end, allDay)
{
  $('#ResModal').modal('toggle');  
  $('#submit').off("click");

  $('#submit').on("click", function () {
    var title = $('#title').val;
    var start = moment(start).format('YYYY-MM-DD');
    var end = moment(end).format('YYYY-MM-DD');
    var objectif = $('#objectif').val;
    var room_id = $('#room_id').val;

    $.ajax({
      url:"{{route('MyReservations.store')}}",
      type:"POST",
      data:{title, start, end, room_id, objectif},
      success:function(response)
      {
        // MyReservations.fullCalendar('refetchEvents');
        // alert("Added Successfully");
        console.log(response)
      },
    })
  });
}

Note that I also modified the "click" handler slightly and added an .off call just before it. That's so that if you then select another area afterwards, and then another one, it doesn't add more and more "click" handlers without removing the previous ones - because if you didn't remove them, then when the modal is submitted it will run all the added handlers (one for each time there's a selection) and re-submit the earlier event data to the server, resulting in duplicate data being stored.

TypeError: Cannot convert undefined or null to object: point me in the right direction

Object.assign only works with objects. ...categoryList.map(...) is an array. Either put Object.assign within the map (or forEach, since it doesn't return anything). Or take a look at Object.fromEntries.

const categoryObject = {};
categoryList.forEach(category => 
  Object.assign(categoryObject, {
    [category.name]: amountByCategory[category._id] || 0
  })
);

// or 

const categoryObject = Object.fromEntries(
  categoryList.map(cat => ([cat.name, amountByCategory[cat._id] || 0]))
);

---

Related Topics