Remove some objects of a Json in ReactJs

Question

I have JSON that looks like this:

[
{
    "invoice": {
        "index": 1.0,
        "id": "58107",
        "read": "1"
    }
},
{
    "invoice": {
        "index": 2.0,
        "id": "58105",
        "read": "0"
    }
},
{
    "ResultCount": 532.0
},
{
    "Search": 0.0
}
]

JSON called by fetch request:

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        library: null,
        perPage: 20,
        currentPage: 1,
        maxPage: null,
    };
}
componentDidMount() {
    fetch('/json.bc', {
        method: 'get',
    })
        .then(response => response.text())
        .then(text => {
            let Maindata = JSON.parse(text)
            this.setState(state => ({
                ...state,
                data: Maindata
            }), () => {
                this.reorganiseLibrary()
            })
        }).catch(error => console.error(error))
}

reorganiseLibrary = () => {
    const { perPage, data } = this.state;
    let library = data;
    library = _.chunk(library, perPage);
    this.setState({
        library,
        currentPage: 1,
        maxPage: library.length === 0 ? 1 : library.length
    })
}

previousPage = event => {
    this.setState({
        currentPage: this.state.currentPage - 1
    })
}

nextPage = event => {
    this.setState({
        currentPage: this.state.currentPage + 1
    })
}

handlePerPage = (evt) =>
    this.setState({
        perPage: evt.target.value
    }, () => this.reorganiseLibrary());

renderLibrary = () => {
    const { library, currentPage } = this.state;
    if (!library || (library && library.length === 0)) {
        return <div>nodate</div>
    }
    return library[currentPage - 1].map((item, i) => (
        <tr>
            <td>{item.invoice.index}</td>
        </tr>
    ))
}


render() {
    const { library, currentPage, perPage, maxPage } = this.state;
    return (
        <div>
            {this.renderLibrary()}
            <ul id="page-numbers">
                <li className="nexprevPage">
                    {currentPage !== 1 && (
                        <button onClick={this.previousPage}><span className="fa-backward"></span></button>
                    )}
                </li>
                <li className="controlsPage active">{this.state.currentPage}</li>
                <li className="restControls">...</li>
                <li className="controlsPage">{this.state.maxPage}</li>
                <li className="nexprevPage">
                    {(currentPage < maxPage) && (<button onClick={this.nextPage}><span className="fa-forward"></span></button>
                    )}
                </li>
            </ul>
        </div>
    )
}
}
ReactDOM.render(<App />, document.getElementById('ResultContainer'))

I want to remove two last object of JSON :

{
"ResultCount": 532.0
},
{
"Search": 0.0
}

How can I remove them?

Answer 1

you can use delete Maindata.ResultCount. This one won't throw errors or will behave unexpectedly in case of data structure changes

Answer 2

You can use splice method

data.splice(data.length-2, 2);

let data = [
{
    "invoice": {
        "index": 1.0,
        "id": "58107",
        "read": "1"
    }
},
{
    "invoice": {
        "index": 2.0,
        "id": "58105",
        "read": "0"
    }
},
{
    "ResultCount": 532.0
},
{
    "Search": 0.0
}
];
data.splice(data.length-2, 2);
console.log(data)