Guide on converting JSON object to condensed rows when using ng-repeat

From the database, I am receiving a JSON object which is one large object:

 $scope.totalsum =
      {
           "A1": 1155000,
           "A2": null,
           "A3": 2133,
           "A31": 29292,
           "A32": 2321,
           "A33": 232342,
           etc....
      },

I want to display A31 & A32 in a collapsed table data row. The ng-repeat for the object looks like this at the moment:

 <tr ng-repeat-start="data in totalsum" ng-click="isRowCollapsed=!isRowCollapsed">
      <td>
           <input class="form-control" placeholder="{{data.total | number:2}}">
      </td>
 </tr>
 <tr ng-repeat-end ng-show="data.breakdown.length>0" ng-hide="isRowCollapsed">
      <td ng-show="data.breakdown.length>0">
           <div class="subvalues" ng-repeat="subvalues in data.breakdown">
                <input class="form-control" placeholder="{{subvalues.subtotal | number:2}}">
           </div>
      </td>
 </tr>
 <tr>
      <td>
           <input class="form-control" placeholder="{{getTotal('total') | number:2}}">
      </td>
 </tr> 

Initially, my working ng-repeat was for a JSON object structured like this:

 $scope.totalsum = [
                     {
                          "total": 1155000,
                          "breakdown": null
                      },
                      {
                          "total": 233235000,
                          "breakdown": [
                              {
                                  "subtotal": 22002020
                              },
                              {
                                  "subtotal": 22002020
                              }
                          ]
                      },

Answer №1

From what I understand, an effective way to tackle this issue is by using ng-repeat along with the (key, value) option:

<tr ng-repeat="(key, value) in totalsum">
     <td> {{key}} </td> <td> {{ value }} </td>
</tr>

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

Bind AngularJS data to select elements

I am encountering an issue with data binding on a select tag, despite following the guidelines in the documentation. Here is my select element: <select id="start-type" ng-model="startType"> <option value="day-of-week">Day of the week</op ...

Using a custom ParcelJS plugin from the local directory

I am interested in developing a plugin to enable raw loading of a specific type of file with Parcel. According to the documentation, Parcel detects plugins published on npm with certain prefixes and automatically loads them along with their dependencies li ...

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

I need help redirecting to a new page upon button click using a JS function. The URL needs to include an email address parameter. <form> <input type="email" id="mail" placeholder="ENTER YOUR EMAIL ADDRESS" requir ...

Issue with Moment.js formatting results in an 'invalid date' error

One issue I am encountering with my formatTime function using moment.js is that if the input number is NaN, moment.js outputs 'invalid date'. Does anyone know of a solution to fix this? $scope.formatTime = function(time) { if (time>24){ ...

JavaScript hack for improving slow scrolling experience with smooth scroll on Firefox

As a web application developer, I encountered a particular scenario where there are multiple position:fixed elements, canvases, and an overflow:scroll element. Unfortunately, scrolling in Firefox becomes extremely slow when smooth scrolling is enabled. Wh ...

Unable to retrieve the unique identifier for this item

When attempting to retrieve the current ID of an item in a table by clicking the Purchase button and using console.dir, it only displays the first element. I have also tried console.dir for this.id but it returns nothing. function listProducts() { ...

Error message for Joi when validating a nested array of objects

I have received user input from the client side and am performing backend validation using Joi. const Joi = require("joi") const schema = Joi.array().items( Joi.object().required().keys({ name: 'filter_list', value: Joi.array(). ...

There were no visible outputs displayed within the table's tbody section

import React from 'react'; export default class HelloWorld extends React.Component { public render(): JSX.Element { let elements = [{"id":1,"isActive":true,"object":"Communication","previ ...

Ensure that at least one mandatory field is implemented with React final form

Here is a code snippet that handles field validation: export const isOneFieldValid = (val: string) => { console.log(val) return val ? undefined : true } ... const validate = (field: string) => { switch (field) { case 'email': { ...

The onClick event in React/NextJS is not functioning properly when applied to an external component

One dilemma I am facing involves my main page and a button component that I have created to be reused throughout my project. Strangely, when I add the onClick event to the external component, the click event does not seem to work. However, if I create the ...

Increasing and decreasing values

I'd like to create two buttons for increasing and decreasing a value. For example, if the variable k is initially set to 4 and I press the decrement button, it should decrease from 4 to 3. This is what I attempted: var k = 1; function qtrFunction ...

Tips on importing Twitter JSON data into Python

Looking to import a JSON file extracted from the Twitter API into Python. Provided below is a snippet of the JSON object: {"created_at":"Mon Apr 22 18:17:09 +0000 2019","id":1120391103813910529,"id_str":"1120391103813910529","text":"On peut dire que la ba ...

Automatically populating additional fields in JavaScript/React by taking information from the initial field

1. I am working with an array called "listOfPaysIndexes", which contains 12 indexes. My goal is to use this array to iterate through and display 12 DateInput fields. 2. Each of these fields can be clicked on to select a date. 3. Once a date is chosen in ...

Retrieve all the items listed in the markdown file under specific headings

Below is an example of a markdown file: # Test ## First List * Hello World * Lorem Ipsum * Foo ## Second List - Item 1 ## Third List + Item A Part of Item A + Item B ## Not a List Blah blah blah ## Empty ## Another List Blah blah blah * ITEM # ...

Tips on looping through Query List of django model

I've encountered an issue while reading a json file from a website and trying to create new Customers in Django. Even though the records are already present in my Customers queryset, the code is still attempting to create duplicates. Below is the cod ...

Error: The JSON input unexpectedly ended, however the PHP file itself is error-free

When trying to display data retrieved using PHP through JSON/Ajax, I encountered an error message: [object Object] | parsererror | SyntaxError: Unexpected end of JSON input The PHP script is functional (I can view the JSON output by directly accessing th ...

Is there a way to illuminate a complete row by simply hovering over a span within one of the columns?

If I want to change the background-color of a div with classes "row" and "highlightThisRow" when hovering over a span with the class "fromThisSpan", how can I achieve that? In a list, there are multiple rows with several columns. The span in question is l ...

Updating a div using PHP elements

Currently, I'm using a webcam to capture images for a project related to learning. My goal is to showcase the recently taken photos. After taking a photo, it gets stored in a folder. To display all the collected photos within a <div>, I need to ...

While attempting to utilize inner class functions in Node JS, an error is being encountered

I've been delving into Node JS and exploring how to implement an OOP structure within node. I've created a simple class where I'm using functions to verify and create users in a database. However, I'm encountering a TypeError when attem ...

Tips for clearing input fields in React.js without using an empty string

Is there a way to reset the input field in this specific scenario? const [username, setUsername] = useState({ username: "", usernameError: "" }); const handleUsername = (inputUsername) => { if (inputUsername.length > ...