How to get the length of the response from a fetch request?

How to get the length of the response from a fetch request?

I have got series of data that contains some objects in one array(json file) and it will be shown by react. Here is my code:

I have got series of data that contains some objects in one array(json file) and it will be shown by react. Here is my code:

 class App extends React.Component {
      constructor(props){
        super(props);
        this.state = {
        data: [],
        library:null,
        perPage: 20,
        currentPage: 1,
        maxPage: null,
        filter: ""
        };
       }
   componentDidMount() {
   fetch('/json.bc')
  // Here I want to get the length of my respose 
  .then(response => response.text())
  .then(text => {
  var Maindata = JSON.parse(text.replace(/\'/g, '"'))
   this.setState(state => ({
   ...state,
   data: Maindata
     }), () => {
     this.reorganiseLibrary()
    })
   }).catch(error => console.error(error))
}
  reorganiseLibrary = () => {
  const { filter, perPage , data } = this.state;
  let library = data;
    if (filter !== "") {
      library = library.filter(item =>
      item.hotelinfo.hotelsearch.realname.toLowerCase().includes(filter)
   );
 }

library = _.chunk(library, perPage); this.setState({ library, currentPage: 1, maxPage: library.length === 0 ? 1 : library.length }); }; // Previous Page previousPage = () => this.setState(prevState => ({ currentPage: prevState.currentPage - 1 })); // Next Page nextPage = () => this.setState(prevState => ({ currentPage: prevState.currentPage + 1 }));

// handle filter handleFilter = evt => this.setState( { filter: evt.target.value.toLowerCase() }, () => { this.reorganiseLibrary(); } ); // handle per page handlePerPage = (evt) => this.setState({ perPage: evt.target.value }, () => this.reorganiseLibrary());

// handle render of library renderLibrary = () => { const { library, currentPage } = this.state; if (!library || (library && library.length === 0)) { return <div class="tltnodata">no result!</div>; } return library[currentPage - 1].map((item, i) => ( <input type="hidden" value={item.hotelinfo.hotelsearch.hotelid} name="hotelid"/> )); };

render() { const { library, currentPage, perPage, maxPage } = this.state; return ( <div className="Main-wrapper"> <div class="filter_hotelname"><input value={this.state.filter} onChange={this.handleFilter} class="hotelName" /></div> <div class="countHotel"> <span class="numbersearch"></span> // Here I want two show the count of items </div> <div className="wrapper-data"> {this.renderLibrary()} </div> <div id="page-numbers"> <div class="nexprev"> {currentPage !== 1 && ( <button onClick={this.previousPage}><span class="fa-backward"></span></button> )} </div> <div className="data_page-info"> {this.state.currentPage} از {this.state.maxPage} </div> <div class="nexprev"> {(currentPage < maxPage) && ( <button onClick={this.nextPage}><span class="fa-forward"></span></button> )} </div>

  &lt;/div&gt;

</div> ); }
} ReactDOM.render(<App/>, document.getElementById('Result'));

I want to find the length of response from a request with fetch. Also I want to know how to find the count of items that will be shown by renderLibrary . For example in json.bc we have 4 objects I want to show 4 in numbersearch span.

json reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JSON Parsing in Android - Step by Step Implementation

JSON Parsing in Android - What is JSON, Comparison betwen JSON and XML, JSON parsing step by step implementation and functions.

# Google's Flutter Tutorial- Easily Parse Complex JSON, Create JSON Model Classes.

Welcome to Flutter tutorial This demo helps you to easily parse any complex JSON data in to Dart Model classe easily. Proper Error Handling in Flutter https:...

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web

Set the JSON body from an external JSON file in Postman

In this short tutorial, I will show you how to get your entire JSON request body from an external file. This can be particularly useful if you want to use di...

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript