Json plotting range error

I am getting the result from the API like this:

[
  {
    "id": 1,
    "area": "",
    "zone": "T",
    "aisle": "",
    "side": "E",
    "col": 1,
    "level": 0,
    "position": 0,
    "name": "T - E - 1"
  },
  {
    "id": 2,
    "area": "",
    "zone": "T",
    "aisle": "",
    "side": "E",
    "col": 60,
    "level": 0,
    "position": 0,
    "name": "T - E - 60"
  },
  ....
  ,
  {
    "id": 3370,
    "area": "",
    "zone": "T",
    "aisle": "",
    "side": "E",
    "col": 60,
    "level": 0,
    "position": 0,
    "name": "T - E - 60"
  }
]

      

        
        
        
      

    

The result has 3370 records.

I want to store it in AsyncStorage, so I need to tweak it. But the problem is I am getting a range error for JSON.stringify

. The result of 3370 is a lot to strengthen.

Then I used lodash chunk to split the array.

let responseDataChunked = chunk(responseData.slots, 100);

And I got the result from 34 arrays.

let result = [
    [{....}, {....}, ...{....}], // 0: 100 objects
    [{....}, {....}, ...{....}], // 1: 100 objects
    ..... 
    [{....}, {....}, ...{....}], // 34: 70 objects
]

      

        
        
        
      

    

How to do it to get:

"[
  {
    "id": 1,
    "area": "",
    "zone": "T",
    "aisle": "",
    "side": "E",
    "col": 1,
    "level": 0,
    "position": 0,
    "name": "T - E - 1"
  },
  {
    "id": 2,
    "area": "",
    "zone": "T",
    "aisle": "",
    "side": "E",
    "col": 60,
    "level": 0,
    "position": 0,
    "name": "T - E - 60"
  },
  ....
  {
    "id": 3370,
    "area": "",
    "zone": "T",
    "aisle": "",
    "side": "E",
    "col": 60,
    "level": 0,
    "position": 0,
    "name": "T - E - 60"
  }
]"

      

        
        
        
      

    

What I have tried:

fetch(data_url + '/manager/transport/sync/slots/')
            .then(response => response.json())
            .then(responseData => {
                let max_count = responseData.slots.length;
                let current_count = max_count;

                let responseDataChunked = chunk(responseData.slots, 100);
                let jsonData = [];

                for (let i = 0; i < responseDataChunked.length; i++) {
                    let data = [];

                    for (let j = 0; j < responseDataChunked[i].length; j++){
                        let result = responseDataChunked[i][j];
                        let slot = {
                            id: j + 1,
                            area: result.area || '',
                            zone: result.zone || '',
                            aisle: result.aisle || '',
                            side: result.side || '',
                            col: result.col || 0,
                            level: result.level || 0,
                            position: result.position || 0,
                            name: Location.slotName(result)
                        };
                        data.push(slot);
                    }

                    jsonData.push(JSON.stringify(data));
                }

                //jsonData here is:
                [
                    "[{....}, {....}, ...{....}]", // 0: 100 objects
                    "[{....}, {....}, ...{....}]", // 1: 100 objects
                     ..... 
                    "[{....}, {....}, ...{....}]" // 34: 70 objects
                ]


                for (let k = 0; k < responseData.slots.length; k++) {

                    for (let l = 0; l < jsonData.length; l++){
                        AsyncStorage.setItem('slots', jsonData[l], () => {
                            current_count--;
                            counter_cb(max_count - current_count, max_count);
                            if (current_count <= 0) cb();
                        })
                    }


                }
                if (max_count === 0) cb();
            }).done();

      

        
        
        
      

    

Any idea?