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

advertisements

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 myserver.com/people.json, 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.

My question is not with displaying or querying large sequential datasets, so pagination is probably irrelevant. Take for example some data I need to display:

var group = { name: "Woodworking", people_set: [12, 4, 678, 90] }

/* Should come out like:

WOODWORKING
- Peter Johnson
- Anna Holland
- David Green
- Erica Davis
*/

This post has been redacted to better reflect the available options and the author's reasoning

I see four five possible ways to approach this:

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

So make a call to myserver.com/people/<id>.json 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 not functioning correctly.

5. Create an extra indexArray to quickly find the index

Upon creation of the peopleList, create an additional array which holds the ids: [0, 1, 4, ...]. Quickly find the index by using indexOf() on the indexArray and use that index to retrieve the record from the peopleList.

// This would be the way to lookup a name
peopleList[indexArray.indexOf(<id>)].name

Discussion and choice

It looks like methods 1 and 4 are simply bad design. For lookups, method 2 is two orders of magnitude (!) slower than 3 and 5, so should be avoided if you make intensive use of lookups. While 3 is still slightly faster, I decided to go for 5 as it seems more elegant to keep the array.

This post addresses options 2, 3 and 4, and does a benchmark comparison of lookups.


Make one full AJAX call and iterate the array every time this is the right choice here, and if I were you I would store my data in redux state tree.

But, it depends on where you are storing your state data. Every time you make an Ajax call when a component mounts that utilizes the result of that Ajax call, you have to store that data in the state somewhere. So you have two choices, a) you can store that data in local component state, which will last until that component unmounts, and you have to load it again when the component remounts, or b) you can use Redux store to manage your state data, which will keep it persistent.