Should data objects be loaded from backend API all at once or individually for each object?

Imagine having a form used to modify customer information. This form includes various input fields as well as multiple dropdown lists for fields such as country, category, and status. Each dropdown list requires data from the backend in order to populate it. When using this form to edit a customer, you would need to retrieve:

  • The Customer Object being edited
  • A list of countries
  • A list of categories
  • A list of different status types
  • ...

My question is: Should each of these elements be loaded separately with their own backend API call, or should there be a single API call that combines all the necessary data into one object for loading?

javascriptangulartypescript

Answer №1

In most cases, I believe utilizing multiple API calls is the better approach. After weighing the pros and cons as outlined in the table below, my preference leans towards leveraging Multiple API calls for project development.

Special thanks to Andrew Corrigan and Amrit for reminding me of some key criteria.

Single API Multiple API
Network Fewer requests Multiple requests => Utilizing caching
UI Render Data rendering occurs nearly simultaneously Data renders upon receiving API response
Reuse FE component Requires calling a large API for one array of data Retrieve specifically needed data
Reusability of API Low High
Single Responsibility No Yes
Flexibility No Yes

Answer №2

It is my personal belief and based on real-life situations, but in my recommendation I would opt for loading things separately with their own backend API because:

1. Using a single API may cause it to be heavy and result in a negative impact on user experience.
    
2. Users may not edit all fields when the form opens, so only the changing fields will need to interact with the API.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I implement user authentication with ajax and php?

I've implemented an AJAX jQuery function for a more user-friendly login process, but it's still not functioning properly. Can someone point out what I might be doing wrong? Thank you. The code within form_log.php: <script type="text/java ...

javascriptphpjqueryajaxauthentication

Checking URL validity using JavaScript Regex

I attempted to validate a URL with or without the http protocol, but no matter what I tried, the function kept returning false. I verified my regex string on this website: And it appeared as expected. function isUrlValid(userInput) { var rege ...

javascriptjqueryregex

Issues arise in TypeScript 5.1.3 with lodash due to type errors involving excessively deep type instantiation, which may potentially be infinite

Recently, I made updates to my Ionic/Angular project and now it is running Angular version 16.1.3 along with TypeScript version 5.1.3. In addition to this, my project also includes the following dependencies: "lodash-es": "^4.17.21", ...

angulartypescriptlodash

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

javascriptjqueryhtmlcss

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

javascripthtmlexpressresponsebody-parser

"Learn the steps to access a JSON file directly from a URL within a Next.js

My goal is to upload a JSON file to the server from a URL, open it, parse it, and display its features on Google Maps. However, I am encountering an error with the "fs" library preventing me from opening the file. Below is the code: "use client" ...

javascriptreactjsnode.jsgoogle-mapsnext.js

React compatibility problem with Internet Explorer 11

I'm encountering a problem with an error message stating "Expected identifier" in this code snippet. Any thoughts on what might be causing this issue? It seems like the problematic section of the code is originating from the transpiled version of th ...

javascriptreactjsinternet-explorer

Is there a way to ensure that this daily countdown timer continues without resetting at midnight?

Important factors to remember: This is programmed to imitate the time of 11:00 PM. var bt = "23:00"; This is set to emulate 8:00 AM. var wt = "08:00"; The intended operation: The countdown timer kicks off each morning at 8:00 AM. It counts down unti ...

javascripttimemomentjscountdown

Creating a JSON file that contains a collection of discord.js statuses and then seamlessly integrating it into the primary JavaScript document

const userActivities = [ { name: "Morning Jog", type: ActivityType.Running }, { name: "Afternoon Nap", type: ActivityType.Sleeping }, { name: "Evening Game Night", type: ActivityType.Gaming }, { name: "Late Night Code ...

javascriptnode.jsdiscorddiscord.jsnode-modules

What is Flask's approach to managing JSON data?

I am currently developing an editable table using FLASK, JSON, and jQuery. After serializing the form, I send it via $.getJSON, as shown at the bottom of my JS code: This is the JS code: $(function(){ $('tbody').on('click', &apos ...

javascriptjquerypythonjsonflask

How to select the final td element in every row using JQuery or JavaScript, excluding those with a specific class

I am looking for a solution with my HTML table structure: <table> <tbody> <tr> <td>1</td> <td>2</td> <td class="treegrid-hide-column">3</td> < ...

javascriptjqueryhtmlcss

One the year is chosen, it will be automatically hidden and no longer available for selection

<div ng-repeat="localcost in vm.project.localCosts" layout="column"> <md-select name="localcost_{{$index}}"ng-model="localcost.year" flex> <md-option ng-repeat="years in vm.getYears()" ng-value="years">{{years}}< ...

javascriptangularjsmomentjsangular-material

Ways to verify if all files have been loaded using Firebase.util pagination

Is there a way to confirm if it is necessary to stop invoking the loadMore() function, since all documents have been retrieved from the database? In the code snippet provided, Ionic framework is used as an example, but the same concept applies to ng-infin ...

javascriptangularjsionic-frameworkfirebasefirebase-util

How to implement caching using XMLHttpRequest?

As someone who has primarily relied on jQuery's AjAX method, I am relatively new to using XMLHttpRequests. However, due to performance concerns in a web worker environment, I now find myself having to resort to the classic XMLHttpRequest. Currently, ...

javascriptajaxcachingxmlhttprequest

Converting Javascript Variables into a PHP Script

After noticing that the same question was being asked repeatedly, I delved into thorough research to discover effective methods for transferring a couple of JavaScript variables to a PHP script. Include data in a form as hidden values Send to URL, like & ...

phpjavascriptvariablescharacter-encoding

Utilize NgRepeat to access an unidentified array in AngularJS

In a complex multi-level array, there are objects nested at the deepest level. [ [ [ "FUND", { "totassets":10.9, "totdate":"2015-03-23", "expratiogross":1.35, "exprationet" ...

javascriptarraysangularjsobjectangularjs-ng-repeat

Having trouble accessing the information stored in the Firebase Database?

As a newcomer to Firebase and JS, I am attempting to showcase user information on a webpage that is stored within the Firebase database. The data format resembles the image linked here I have written this Javascript code based on various tutorials. Howev ...

javascripthtmlfirebasefirebase-realtime-databasefirebase-authentication

Leveraging the power of the three.js library on the client-side within a vue.js/n

I'm facing a challenge with incorporating the three.js library (installed via npm) to display 3D models on the client side within my nuxt.js application. Despite multiple attempts, I seem to be hitting a roadblock with the import not functioning prope ...

javascriptvue.jsnpmthree.jsnuxt.js

Is VSCode disregarding tsconfig.json and compiling individual files, causing misleading error messages to appear?

After updating typescript, angular, and all the libraries in my project, I encountered a new issue that was not present before. Although I successfully ensured that my code builds without any errors or warnings from the command line, Visual Studio Code sta ...

typescriptvisual-studio-code

Linking two socket.io clients together (Establishing a direct socket-to-socket connection that works across different browsers)

Can a direct P2P connection be established between two browsers using socket.io-client, bypassing the node.js server they are currently connected to? If possible, how? The goal is for clients A and B to communicate directly without going through the node. ...

javascriptnode.jssocketsexpresssocket.io