Angular: How can objects be efficiently stored in a service for display in the view and use of CRUD functions to interact with the server?

I am exploring different options for creating a service that retrieves relational data from the server. I have two potential approaches in mind, but I am having trouble deciding between them.

The first option involves returning the data as a multidimensional array of objects.

posts = [{id: 1, message: 'Sample 1', comments: [{id: 1, message:  'Sample comment 1', replies: [{id: 1, message: 'Sample reply 1'}]}]}]

Alternatively, the second option is to return a one-dimensional array for each object.

posts = [{id: 1, message: 'Sample ', comment_id: 1}]
comments = [{id: 1, message: 'Sample comment 1', reply_id: 1}]
replies = [{id: 1, message: 'Sample reply 1'}]

In both cases, I would compare the arrays by their foreign and primary keys.

I am unsure which approach is superior, or if there is another way to achieve this in Angular. My goal is to easily add, edit, and delete data on the server, as well as efficiently update or append new data to the object for viewing purposes.

Answer №1

My preference would be to opt for the second choice, with a slight modification in structure where objects reference their parent instead of their child:

posts = [{id: 1, message: 'Example '}]
comments = [{id: 1, message: 'Sample comment 1', post_id: 1}]
replies = [{id: 1, message: 'Sample reply 1', comment_id: 1}]

This setup enables the creation of structures with multiple children that are linked to a single parent.

The main benefits include these objects resembling NoSQL responses, which provides flexibility with the database.

Moreover, you have the option to request them only when needed. For instance, if displaying clickable post lists, clicking on one could trigger a request for the comments related to that post (and similarly for replies). By doing this, it reduces the burden of fetching all posts, comments, and replies at once, downloading only the necessary objects upon interaction.

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

Leveraging jQuery and Ajax for retrieving information from a JSON document

As a newcomer to JS, I have successfully set up a JSON file on my Express server. My code snippet looks like this: const data = require('./src/data.json') app.get('/search', function (req, res) { res.header("Content-Type",'app ...

Encountering a 'Not Found' error while deploying my React Node application with an AWS-hosted database on Heroku

const express = require("express"); const app = express(); const bodyParser = require("body-parser"); const port = process.env.PORT || 3002; const cors = require("cors"); const path=require("path"); const routing = ...

Combining Two Models in Sails.js

I'm facing an issue with linking two models in sails. I have two models: 'Singer' and 'Country'. In the 'Singer' model, I have an attribute 'singer_country' which represents the id of the 'Country' mod ...

Setting up jade includes with gulp-jade: A comprehensive guide

Struggling with setting up Jade includes in your gulpfile.js while using gulp-jade? Check out this link for more information. Below is a snippet from the gulpfile.js: var gulp = require('gulp'); var browserSync = require('browser-s ...

Should I increase the number of followers, or opt for an aggregated method to monitor them?

My system loads products using an infinite scroll, displaying 12 at a time. Sometimes, I may want to sort these products based on the number of followers they have. Here's how I keep track of the followers for each product: The follows are stored i ...

Adjust the canvas size to fit its parent element ion-grid

I am currently working on an Ionic 3 component that displays a grid of images connected by a canvas overlay. I have utilized Ionic's ion-grid, but I am facing an issue with resizing the canvas. The problem is that I cannot determine the correct dimens ...

Unable to modify background color in base website

While working on my project with Next.js, I encountered an issue where creating a button to change the color only affected the base web components' color and not the background color. _app.tsx import '../styles/globals.css'; import type { Ap ...

Nodemailer fails to display an error message when the email is not successfully sent

I am currently working on implementing nodemailer for sending emails. However, I noticed that if the email address in the "to" field is incorrect, the email is not sent as expected. The issue is that there is no error displayed and the function still resol ...

What is the difference between achieving a mirror effect and a steel effect using Three.js?

When using three.js, I find myself a little confused about the concepts of metalness and roughness. Can someone explain the differences between metalness and roughness when applied to materials like mirrors and metals/steel? And furthermore, how can these ...

Encountering an Issue: The program is throwing a TypeError because it is unable to access properties of null when trying to read '

My goal is to upload an excel file using ng-click and the fileUpload($event) function defined in the app controller scope. I am utilizing xlsx to read the file in JSON format, but I encounter an error when running the code: <div> <input id ...

Creating an infinite loop using Jquery's append and setTimeout functions

I'm having trouble displaying my JSON data in a table and refreshing it periodically to check for new entries. Unfortunately, I seem to have gotten stuck in an infinite loop where the setTimeOut function keeps adding old entries. Can anyone help me tr ...

Building Your Own Array Object in JavaScript

Yes, it may seem crazy at first glance, but let me clarify things a bit. When using Jquery, for instance $('div'), it returns an Array Collection similar to this: [div#container, div#header, div#logo]. The interesting part is that primitive Arra ...

Some mobile devices are experiencing issues with Android webview not executing javascript functions

Everything was running smoothly on my webview app on the HUAWEI RNE-L22 and iPhone. However, when I tried to run the app on the samsung SM-G530H, it failed to execute my JavaScript function. Surprisingly, the function worked fine on a normal phone browser. ...

Adding elements to a JavaScript modal using a loop

When working with JavaScript, I am dynamically adding content to a modal. This involves populating different data into various table rows and cells within the modal. <table class="table table-striped"> <thead> <tr> ...

Embed the AJAX response into HTML format

I am facing a challenge with rendering an AJAX response in an HTML structure within a PHP file. The issue is that the AJAX response contains multiple data objects, and each of them needs to be placed in specific locations within the HTML. For example, let ...

Multi-line input in ExtJs

Is there a way to create a multiline input with vertical scrollbars in EXTJS? I tried the following code: noteField = new Ext.form.TextField({ emptyText: 'note...', multiline: true, applyTo: &apos ...

When a checkbox is selected, new input fields will dynamically appear

I have a table with 3 text fields and I would like to dynamically add the same set of text fields when a checkbox is clicked. Below is the code snippet I have, how can I achieve this using PHP and JavaScript? echo "<td>Screen ".$i."</td>"; ...

Add a hashbang #!/ to AngularJS $location.path for the URL

Attempting to utilize AngularJS $location to adjust the browser's URL by doing this: $location.path("/post").search({ id: post.id }); However, every time I try, the URL ends up looking like http://localhost:5000/#!/post?id=0 instead of http://lo ...

How I am able to access this.state in React without the need for binding or arrow functions

Understanding the concept of arrow functions inheriting the parent context is crucial in React development. Consider this React component example: import React, { Component } from 'react'; import { View, Text } from 'react-native'; i ...

Execute a post request upon clicking with NEXT JS, while also firing off a get request

I'm facing an issue where I need to post and get my data when clicking on the same button (similar to writing and displaying comments). However, whenever I click the button, everything seems to be working fine but a request with a 304 status code star ...