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

Question

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

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({});
          }
       // });
      }
    }));
  }
});

}

RaphaMex · Accepted Answer · 2018-06-07 17:59:32Z

2

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({});
}

edited Jun 7, 2018 at 17:59

answered Jun 7, 2018 at 14:18

RaphaMex

2,8391 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

R9102 Over a year ago

but any other method to work on if find is not appororiate

RaphaMex Over a year ago

@JMR: yes, use findIndex as I suggest. Also, forEach, map or reduce will parse the full array, which you do not want either.

R9102 Over a year ago

i have used map , let me paste my answer, please correct me

RaphaMex Over a year ago

@JMR: let me have a look and update my answer with complete code

RaphaMex Over a year ago

@JMR: Now you've got a nice javascript example. You may have to adapt following what you want to do. Cheers.

Rodius · Accepted Answer · 2018-06-07 14:01:23Z

1

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 
    }
  });
});

answered Jun 7, 2018 at 14:01

Rodius

2,32117 silver badges20 bronze badges

1 Comment

R9102 Over a year ago

if i alert it need to hit 3 times to get back

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related