CODEWITHSUNDEEP
arraysreactjs
R9102
R9102

Reputation: 727

How to check array of object has values or undefined-Reactjs, Array

I am just trying to loop through the array of object and if the values are empty and undefined and null it should pop up alert message

is there any simple way to find the object of array has values or undefined

tried to search if any post available please post me here

Can any one help me on this

here is the screenshot below

Here i am showing only object which i need to loop through and check if undefined

enter image description here

Edited

handleGobackToBoards =() =>{
const compareWidgetData = this.props.storyboardList.boardList.map((data, key) => {
  if (data.boardId === this.props.selectedBoard.boardId ) {
    data.widgetList.map((widget => {
      if (widget.widgetId) {
        Object.values(widget).map(value => {
          if (value === undefined || value === null || value === "" || value === 0) {
            alert('Empty Data');
          }
          else {
            this.props.manageShowBoard({});
          }
       // });
      }
    }));
  }
});

}

Upvotes: 0

Views: 3250

Answers (2)

RaphaMex
RaphaMex

Reputation: 2839

If you want to know if there is at least 1 value:

  • undefined or null (== null)
  • or empty (=== "")

you should use findIndex on object's values.

if ( -1 !== Object.values(widget).findIndex( v => v == null || v === "") )
    alert("missing value found!");

Note that find is not appropriate because you would not know what it means when it return undefined.

[EDIT with your code]

You misuse map. map is when you want to return an array of same length and work on its transformed elements. Here your function returns nothing.

If you want to return an array with less elements (e.g. matching an id), use filter.

If you want to return anything else (e.g. sum of all elements), use reduce.

If you want to return nothing (void) and just loop through array, use forEach.

If you want to check if an element has a property, use find or findIndex.

From what I understand, your function could be:

handleGobackToBoards = () => {
    const boardList = this.props.storyboardList.boardList,
          boardId = this.props.selectedBoard.boardId;
    boardList
        .filter( (data) => data.boardId === boardId ) // Get all board with matching id
        .forEach( (data) => {
            data.widgetList
                .filter( (widget) => widget.widgetId ) // Get all widgets that have an id
                .forEach( (widget) => {
                    if ( -1 !== Object.values(widget).findIndex( v => v == null || v === "") ) {
                        alert('Empty Data');
                    }
                    else {
                        this.props.manageShowBoard({});
                    }
                });
        });
}

[EDIT2] Something that is not equivalent to your code, but I guess closer to what you want to do:

handleGobackToBoards = () => {
    const boardList = this.props.storyboardList.boardList,
          boardId = this.props.selectedBoard.boardId,
          board = boardList.find( (data) => data.boardId === boardId ); // Get board with matching id
    if (!board)
        return; // No matching board
    const emptyWidget = board.widgetList.find( (widget) => -1 !== Object.values(widget).findIndex( v => v == null || v === "") );
    if (emptyWidget)
        alert('Empty Data');
    // All widgets have no empty property, show board
    this.props.manageShowBoard({});
}

Upvotes: 2

Rodius
Rodius

Reputation: 2311

Loop the array of widgets and loop through each widget values to check each value:

widgetlist.forEach(widget => {
  Object.values(widget).forEach(value => {
    if (value === undefined || value === null || value === "") {
      console.log('Value ', value, ' of widget', widget, ' is empty'); // if you prefer do an alert 
    }
  });
});

Upvotes: 1

Related Questions