Design pattern for working with Ajax data. What is the right way?

I am developing a react app where I make intensive use of data that I get from AJAX requests. Let's say I can retrieve data at http://ift.tt/2mC0U5p, where the data would look like:

var peopleList = [ 
    {"id":0, "name": "John Smith", "age": 30},
    {"id":1, "name": "Jane Green", "age": 19},
    {"id":2, "name": "Bob Dylan", "age": 69},
    ...
]

The list of people is likely to eventually number between 10,000 and 100,000 and I will never display the complete list, but rather some sublists and individual instances with are identified through the id.

I see four possible ways to approach this:

1. Make and individual AJAX call every time an instance needs to be displayed

So make a call to http://ift.tt/2m1SSGC to only retrieve the data needed. I fear this will likely swarm the server with lots of small requests and will require a lot of async code to mixed into my code.

2. Make one full AJAX call and iterate the array every time

The call is made on initialisation and the data is kept in memory as an Array (see above). Every time an instance is needed I iterate the array until I find an object with a matching value for id.

3. As the previous, but lookup from an object

I transform the Array into an object, where the stringified key matches the id to lookup. This may be potentially faster?

{ "0": { "name": "John Smith", "age": 30},
  "1": { "name": "Jane Green", "age": 19},
  "2": { "name": "Bob Dylan", "age": 69},
  ...
}

4. I trust the list index to match the id

As I control the database, I will never remove a record and maintain the ids as a sequential list from 0. The lookup can then be simply:

peopleList[id]

This still seems like a high risk approach as an inadvertent deletion of a primary key will result in the app nit functioning correctly.

Any ideas on the best approach here, or am I missing something basic?