Question 110580 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – Break the foreach method when the value comes true

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.

Tags:

5

Answers


  1. 0

    ForEach doesn’t support break. use for of

    for (const el of arr) {
   if (el.available) {
    break;
  }
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
  5. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search