Break the foreach method when the value comes true

Question

I have to break the forEach method when the value of available is true.

[
  {
    "Book": "Book1",
    "available": false
  },
  {
    "Book": "Book2",
    "available": false
  },
  {
    "Book": "Book3",
    "available": true
  },
  {
    "Book": "Book4",
    "available": true
  }
]

enter image description here

And print only one item after the value of available comes true.

Does this answer your question? [Short circuit Array.forEach like calling break](https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break) — lusc, Dec 27 '22 at 10:25
No, I have to print only one item after the value comes true. — , Dec 27 '22 at 10:27
It is not clear to me why the code in the image would give an error. And please don't post code as a screenshot, let alone a *link* to a screenshot. We need more context of the code around. It's not really a run-time error happening here; it's a syntax error, which we can't figure out without seeing more context. — Simon Lundberg, Dec 27 '22 at 13:49

score 1 · Answer 1 · answered Dec 27 '22 at 10:26

1

map and forEach will run on all values in the array. There is a loop under the hood, but you don't have control over the loop body.

If you want to break at some position in the loop, just use a for-of loop:

for (const book of books) {
    if (book.available) break;
}

answered Dec 27 '22 at 10:26

Simon Lundberg

1,413
2
11
23

When I am using the for of in react js it gives the error – Dec 27 '22 at 10:32
You should add _how_ you're using the code by adding that code to the question (as a [mcve]). Most likely you'll have to shift that code to its own function and then call it from the JSX. @DipeshKumarSah – Andy Dec 27 '22 at 10:35

score 0 · Accepted Answer · edited Apr 05 '23 at 13:38

0

ForEach doesn't support break. use for of

for (const el of arr) {
   if (el.available) {
    break;
  }
}

edited Apr 05 '23 at 13:38

danronmoon

3,814
5
34
56

answered Dec 27 '22 at 10:26

Sachila Ranawaka

39,756
7
56
80

When I am using the for of in react js it gives the error. – Dec 27 '22 at 10:30
what is the error – Sachila Ranawaka Dec 27 '22 at 10:31
Expression expected. – Dec 27 '22 at 10:31
did you include the if condition? which line is the error? – Sachila Ranawaka Dec 27 '22 at 10:34
I am new on Stackoverflow, Is there any option to send the picture – Dec 27 '22 at 10:35
update the original question – Sachila Ranawaka Dec 27 '22 at 10:36
Please see the image on the original question I have added the image with an error. – Dec 27 '22 at 10:39
calling inside the template requires returning a value to render in DOM. move the for loop to a function and return an element or string from that function to – Sachila Ranawaka Dec 27 '22 at 10:42

score 0 · Answer 3 · answered Dec 27 '22 at 10:32

You can't break the forEach.

If you want to print only one item. I think the find method is what you are looking for.

const list = [
  {
    "Book": "Book1",
    "available": false
  },
  {
    "Book": "Book2",
    "available": false
  },
  {
    "Book": "Book3",
    "available": true
  },
  {
    "Book": "Book4",
    "available": true
  }
] 

const item = list.find(({available})=>available)
// item would be  {
//    "Book": "Book3",
//    "available": true
//  }

For more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

score 0 · Answer 4 · answered Dec 27 '22 at 10:57

find will short-circuit the iteration after it finds the first instance where the condition is met. You may want to put that code in its own function and then call it from the JSX.

Note I've relabeled the Book property to title here as it made a little more sense semantically.

const { useState } = React;

function Example({ data }) {
  
  // Get the first available book, and
  // return its title
  function findFirst(data) {
    return data.find(book => {
      return book.available;
    }).title;
  }
  
  // Call the function
  return (
    <div>
      {findFirst(data)}
    </div>
  );

}

const data=[{title:"Book1",available:!1},{title:"Book2",available:!1},{title:"Book3",available:!0},{title:"Book4",available:!0}];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

score 0 · Answer 5 · answered Dec 27 '22 at 11:03

I have faced the same issue earlier. I found that it is not possible to declare break in forEach or in map function. It will traverse the whole array instead. You can use break in for loop. However using a flag it can be done.

Reference: Past Stack Overflow Post

MDN article: MDN article on ForEach()

However for loop will do that easily. Such as:

let data = [
  {
    "Book": "Book1",
    "available": false
  },
  {
    "Book": "Book2",
    "available": false
  },
  {
    "Book": "Book3",
    "available": true
  },
  {
    "Book": "Book4",
    "available": true
  }
]

for(let i = 0; i < data.length; i++){
  if(data[i].available){
    console.log(data[i]);
    break;
  }
}

This will give you the very first available which is true only. However you can also use find function to do get the same output:

let data = [
  {
    "Book": "Book1",
    "available": false
  },
  {
    "Book": "Book2",
    "available": false
  },
  {
    "Book": "Book3",
    "available": true
  },
  {
    "Book": "Book4",
    "available": true
  }
]

let findData = data.find(item => {
  if(item.available){
    return item;
  }
  return false;
});
console.log(findData);

Break the foreach method when the value comes true

5 Answers5