Creating and maintaining a table in AngularJS based on specific tag values

Question

Creating and maintaining a table in AngularJS based on specific tag values

Hello, I am new to working with AngularJS and have come across a scenario that I need help with.

My goal is to create a table with multiple tbody elements (which are essentially rows, but using tbody for optimal functionality with angularjs 1.0.7).

Each row should be generated based on the items I have available.

Initially, when the page loads, there are no rows/tbody elements. I plan to connect to a backend via websocket to receive data pushes. With each push, I want to add a new row/tbody if it doesn't already exist with the same key from the backend. If the key does exist, I would like to update the existing row/tbody.

For a clearer picture, here is the code snippet I am using:

<tbody ng-repeat="quote in model.messages.message">             
    <tr>                                                                            
        <td bgcolor="#FFFFFF" valign="bottom" colspan="5"><font size="2">{{quote.value1}}</font></td>
    </tr>
    <tr>
        <td bgcolor="#FFFFFF" align="right"><font size="2">{{quote.value2}}</font></td>
        <td bgcolor="#FFFFFF" align="right"><font size="2">{{quote.value3}}</font></td>
    </tr>                               
</tbody></table>

In this code, the "key" referred to is quote.value1.

javascript angularjs

Answer 1

Answer №1

It all depends on how your server returns the data structure. Instead of using quote.value1, why not create an array of values to make your JSON cleaner like this:

Let's assume modal.messages =

   [{
      "id":1, 
      "values":
          [{"vid":1, "m":"This is a message value"},
            {"vid":2, "m":"THis is a second message"}]}, 
    {"id":2, "values":[...]}, ...]

Each message now has a values array.

You can then use ng-repeat over the values as follows:

     <tbody ng-repeat="quote in model.messages">             
            <tr ng-repeat ="message in quote.values">
               <td >{{message.m}}</td>
            </tr>
     </tbody>

This allows you to add the retrieved values to the correct part of the data and update the view accordingly.

In the controller, you can push new data to the array or update existing values. For example, if you receive data like this:

     data = {"vid":3, "m": "Another great message from the server"};

In your controller, you need to determine if it's a new message or an update. Adding a new one is simple:

     your_array.push(data);

This will append it to the array and update the view. I can demonstrate how to achieve something similar without using websockets.

    $scope.getUpdateData = function(quote){
      $http.post('YOUR_SERVER_URL')
        .success(function (data) {
         quote.values.push(data); //if it is new 
         //check if the id exists and replace it otherwise.
       });
    }

Answer 2

It all depends on how your server returns the data structure. Instead of using quote.value1, why not create an array of values to make your JSON cleaner like this:

Let's assume modal.messages =

   [{
      "id":1, 
      "values":
          [{"vid":1, "m":"This is a message value"},
            {"vid":2, "m":"THis is a second message"}]}, 
    {"id":2, "values":[...]}, ...]

Each message now has a values array.

You can then use ng-repeat over the values as follows:

     <tbody ng-repeat="quote in model.messages">             
            <tr ng-repeat ="message in quote.values">
               <td >{{message.m}}</td>
            </tr>
     </tbody>

This allows you to add the retrieved values to the correct part of the data and update the view accordingly.

In the controller, you can push new data to the array or update existing values. For example, if you receive data like this:

     data = {"vid":3, "m": "Another great message from the server"};

In your controller, you need to determine if it's a new message or an update. Adding a new one is simple:

     your_array.push(data);

This will append it to the array and update the view. I can demonstrate how to achieve something similar without using websockets.

    $scope.getUpdateData = function(quote){
      $http.post('YOUR_SERVER_URL')
        .success(function (data) {
         quote.values.push(data); //if it is new 
         //check if the id exists and replace it otherwise.
       });
    }

Creating and maintaining a table in AngularJS based on specific tag values

Answer №1

Similar questions

JavaScript functions do not work within the HTML code

Switch the monitored variable's value in VueJS

Error: The JSON data type is not recognized - Asp.Net MVC 4

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

Using Backbone.js to Persist Information on the Server

Sending information from a controller to the $uibModal controller in AngularJS

invoke a function upon successful completion of an ajax call in a datatable

Having trouble adjusting the label fontSize in ReactJS when using semantic-ui-react?

I am facing an issue where my dropdown is not being populated by the angularjs ng

Developing JavaScript code for preventing blocking

Combining two JSON objects with sailsjs-nodejs to create a single merged object

Cookie set upon clicking a particular element exclusively

Executing multiple AJAX requests with promises in Angular based on an array of values

Exploring the World of Subclassing Arrays in JavaScript: Uncovering the TypeError of Array.prototype.toString's

Using jQuery to locate and delete multiple attributes from div elements

universal live media streaming application

Creating a jQuery AJAX data object that contains numerous values for a single key

Using the .ajax() function with jQuery to retrieve data and then using .find() on that data

Does the DOMContentLoaded event fire only after all script tags have been downloaded?

Mastering JQuery: Techniques for Managing Events Across Numerous Elements