Which is more efficient: Loading all data at once as JSON in AngularJS or using a database to load only necessary parts?

I need to showcase products from an ERP system on a website. The ERP system can generate either an XML or JSON file containing all the product information. The website must have features like pagination, sorting, and filtering by attributes. Currently, my plan is to simply load the entire file in AngularJS and process each item individually, as the number of products is around 500 and the client updates the data daily, eliminating the need for a database synchronization process.

However, I have concerns about performance. Sorting, filtering, and pagination would be much faster with a database like MongoDB, given its simple data structure.

Would I encounter significant performance issues by handling everything in AngularJS? Is this approach feasible, or should I consider adding a database layer between the ERP system and the frontend for better performance?

javascriptjsonangularjsmongodb

Answer №1

If you want to know for sure, the best way is to try it out yourself - that's what I would do. The response is often, "it depends..". If you have around 500 products, and each product only has a name, then using a database might be unnecessary. Angular can handle this amount easily. However, if each product has a lot of properties and nested data, the file could end up being too large to load on every page. So, it really depends on the specifics.

Here's what I suggest:

  • Export the file from the ERP as JSON
  • Create a basic Angular application
  • Use the JSON file as a resource file
  • Set up a simple repeater to display the objects on the page

Now you can play around with filtering, sorting, pagination, and more. See if the browser performance and load times meet your needs.

Answer №2

I believe that there should not be any issues with data transfer performance as the JSON file only contains 500 elements. However, displaying all 500 elements using AngularJS may result in performance problems.

Instead of implementing pagination, you might want to consider utilizing 'Infinite Scroll' with AngularJS as a more efficient solution for displaying results. You can refer to this article for more information:

I personally do not recommend introducing a database as a cache. With only 500 elements, the performance gain would be minimal and could potentially introduce more problems than it solves. Additionally, maintaining a database adds another layer of complexity to the system ;)

Cheers

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

Error encountered in Next.js Webviewer during build process: "Reference Error - window is not defined"

Currently, I am in the process of developing a website that includes a PDF viewer within a dynamically imported page. When I run the code locally, everything works without any issues. However, when I execute the "npm run build" command, I encounter the fol ...

javascriptreactjsnext.js

Using asp.net and c# in tandem with javascript is a powerful

((LinkButton)e.Item.FindControl("my_label_name")) .Attributes.Add("onclick","javascript:myCustomFunction('" + dbValue1 + "','"+dbValue2+"')"); I implemented this code (located in my default.aspx.cs) ...

c#javascriptasp.net

Is it considered poor practice to employ setTimeout to ensure that a function is executed after the useEffect hook has run?

Let's imagine I have the following code snippet: const [test, setTest] = useState(); const [test2, setTest2] = useState(); useEffect(() => { setTest2(undefined); }, [test]); const calledFunction => () { setTest(whatever); setTest2(this ...

javascriptreactjs

It appears that Flask-CORS is failing to retrieve the data sent from the AJAX client

I am currently using Flask to develop endpoints for a blockchain project and I am having trouble accepting JSON data from an AJAX client. Since it's a cross-platform application, I decided to use Flask CORS, but unfortunately, it's not working as ...

jsonajaxpython-3.xflaskflask-cors

ReactJS: error occurs when trying to fetch data and encountering issues with reading properties

I am currently attempting to initiate an API call (a GET request) in order to download a document. However, I am encountering an error when making the API call: TypeError: Cannot read properties of undefined (reading 'payload') const printPin ...

javascriptreactjstypescript

Is there a built-in binding for input fields in ReactJS?

I've created a somewhat intricate form in React that, when simplified, resembles the following: var MyForm = React.createClass({ init: { data: { "MyValue" : "initial value" } }, getInitialState: function() { return this.init; }, ...

javascriptreactjs

Next.js application deployment halted due to an unsuccessful completion of the process with the command "/bin/bash -ol pipefail -c npm ci"

After completing the development of a Next.js application (discord clone), I encountered an issue while trying to deploy it on Railway. The error message was: Dockerfile:20 ------------------- 18 | ENV NIXPACKS_PATH /app/node_modules/.bin:$NIXPACKS_P ...

javascriptnext.js

Using jQuery to pass an array as part of an object literal for AJAX data transmission

I'm currently facing an issue with passing a dynamic object to jQuery ajax data in order to mimic the structure of serialized form data. This problem arises when I have a form with inputs using an array for the name, as shown below: <input type="t ...

javascriptjqueryajax

Why doesn't package.json typically utilize the preset values stored in the .npmrc file?

Windows 10 x64 Based on the information found here, I created a file called C:\Users\bushm\.npmrc with the following content: author = "Andrey Bushman" However, when I run the command npm init -y in a new directory, I noticed that the pac ...

javascripttypescriptnpmpackage.json

Exporting a Three.js scene to a data URL is as easy

After attempting to save an image from a three.js WebGl render, I am encountering an issue where the saved image appears completely blank, despite returning a string of characters: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAADICAYAAACeY7GXAAADt0lE ...

javascriptthree.jswebglgetimagedata

The google analytics tag is failing to function properly after implementing ajax on the

I am currently utilizing Google Analytics to track all events on my website. I have noticed that when the gtag scripts are directly embedded into the HTML, everything works perfectly fine (I always verify the events in Google Analytics). However, after i ...

javascriptphpajaxgoogle-analyticsgtag.js

How AngularJS setValidity function can prevent the modelValue from updating

I've encountered a challenge with a form that I can't seem to figure out. Here's what's going on: To address the issue, I came across an interesting directive from this source: https://github.com/TheSharpieOne/angular-input-match This ...

angularjsvalidationangularjs-directive

There seems to be an issue with JavaScript functionality when implementing Bootstrap 5.3

Struggling with building a website on Visual Studio Code using Bootstrap 5.3. The functions like buttons not expanding and carousel not rolling are not working. Being a beginner, I'm finding it hard to understand why :( Has anyone encountered this is ...

javascriptbootstrap-5

Conserving node.js native imports for Electron with rollup

I am working on a project using Electron, Svelte, and Typescript. Initially, I used a specific template from here, but it restricted access to node.js built-in imports like fs for security reasons in the browser/electron frontend. However, I do not requir ...

javascriptnode.jstypescriptelectronrollup

Enhancing the validation of multiple selects using jQuery

Here is what I have accomplished so far: JSFIDDLE My current goal is to: add the class "invalid" to the <select> if it was not selected in its respective row remove the "invalid" class if all 3 selects in the row are selected automatically submit ...

javascriptjquery

Modifying the .textcontent attribute to showcase an image using JavaScript

I am working on a website and I want to change editButton.textContent = 'Edit'; so that it displays an image instead of text. var editButton = document.createElement('button'); editButton.textContent = 'Edit'; After exploring ...

javascripthtmlcss

Error message from Mongoose: A document is required to have an _id before it can be saved at the new M

I encountered an issue with my registration page where clicking on the Register button leads to an error page displaying a Mongoose Error in the terminal. The specific error message is "MongooseError: document must have an _id before saving at new Mongoose ...

node.jsmongodbmongoose

What is the best way to send props to a CSS module in React?

Currently utilizing NextJS, I have a route named about that is displayed through page.js. Within /about/page.js, I am incorporating a component called <Hero /> and aiming to pass a prop to <Hero heroHeight={'height: 400px'} /> to my C ...

javascripthtmlcssreactjsnext.js

Angularjs does not seem to be rendering content placed within curly braces

I'm working on setting up a page with Angular, and I'm facing an issue with displaying JSON data received from the server. Here is the code snippet: HTML <body ng-app="App"> <nav class="navbar navbar-dark bg-inverse navbar-fixed-top"& ...

javascriptangularjsjson

Implementing React.JS to dynamically update a value from a websocket and store it within

I want to create a dynamic stock price table that updates with live stock prices using websockets. I have all the necessary data and need to update my stock price object with the live price. How can I access the variable and insert the value into the obj ...

javascriptreactjs