Utilizing AngularJS to iterate through an array of dictionaries

Within a specific section of my HTML code, I am initializing a scope variable like this:

$scope.my_data = [
                {
                        c1: "r1c1",
                        c2: "r1c2",
                        c3: "r1c3",
                        c4: "r1c4",
                },
                {
                        c1: "r2c1",
                        c2: "r2c2",
                        c3: "r2c3",
                        c4: "r2c4",
                },...
        ];

After that, my intention is to loop through it using ng-repeat. Here's how I implement it:

<tbody>
        <tr data-ng-repeat="row in my_data">
            <tr data-ng-repeat="(column, value) in row">
               <td>{$ column $}</td>
               <td>{$ value $}</td>
            </tr>
        </tr>
</tbody>

However, I'm facing an issue where nothing appears for the column and value.

If I use (row_num, row) in my_data, row_num correctly displays the index and row contains the correct object. Now, my goal is to expand this object further.

Answer №1

The structure of your HTML code with the

<tr data-ng-repeat="(column, value) in row">
nested inside another tr tag is not valid. If all you want is to display the data, consider using nested tables for the second ng-repeat:

<table>
    <tbody>
      <tr data-ng-repeat="row in my_data">
        <td>
          <table>
            <tr data-ng-repeat="(column, value) in row">
              <td>{{column}}</td>
              <td>{{value}}</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
</table>

This approach should give you the desired output, although nesting tables can sometimes cause formatting challenges.

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

Tips for acquiring offspring who are exclusively not descendants of a particular node

Currently, I am utilizing jQuery and my goal is to access all elements of a specific type that are not children of a particular node type. For example, my Document Object Model (DOM) structure looks like this: <div id='idthatiknow'> & ...

Can you guide me on implementing AWS SDK interfaces in TypeScript?

Attempting to create an SES TypeScript client using AWS definitions file downloaded from this link My approach so far: /// <reference path="../typings/aws-sdk.d.ts" /> var AWS = require('aws-sdk'); var ses:SES = new AWS.SES(); The error ...

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

Creating a stunning image carousel in Vue by integrating a photo API: step-by-step guide

Trying to figure out how to create an image carousel in Vue using photos from an API. Currently able to display the photos using: <section class="images"> <img v-for="image in images" :key="image.id":src="image.assets.large.url"> &l ...

Show the percentage of completion on the progress bar while uploading with AJAX

I'm having trouble updating the current upload value on my progress bar in real-time. I know how to do it when the progress bar has stopped, but I can't get it to update continuously. xhr.upload.onprogress = function(e) { if (e.lengthComputa ...

Error message "Unable to access property 'rotation' of an object that does not exist - Three.js"

I'm currently facing an issue where my code is executing as expected, but there are two errors popping up in the console saying "Cannot read property 'rotation' of undefined". It's puzzling because both variables are defined globally. I ...

The functionality to scroll to the top of the page is not functioning properly in Next.js when navigating to a new page using the Link

While using Next.js, I encountered an issue where opening a new page would maintain the scroll position from the previous page. For instance, if I had scrolled to the bottom of a product listing page and clicked on a specific product, the product details p ...

How can I stop jQuery mobile from updating the document title?

It appears that jQuery mobile automatically uses the text content of data-role="header" to set the document.title. For example: <div data-position="fixed" data-role="header"> <h1>This text</h1> </div> To work around this, I ha ...

Guide on showing a dropdown menu depending on the data in the current array index within a table

I am working with an object array that I want to display in a table. My goal is to have a dropdown select if the 'validvalues' field is not empty. How can I achieve this so that each row in the table has different options from the array? When &ap ...

How can you include a multi-layered array within another multi-layered array using TypeScript?

If we want to extend a two-dimensional array without creating a new one, the following approach can be taken: let array:number[][] = [ [5, 6], ]; We also have two other two-dimensional arrays named a1 and a2: let a1:number[][] = [[1, 2], [3, 4]]; let ...

Steps for dynamically adding a ng-click handler:1. Create the function

I attempted to implement ng-click on a dynamically generated button, but encountered issues with its functionality. Despite trying various solutions from this forum, none of them have proven successful. Here is my HTML code: <body class="max_height" n ...

Angular routes are failing to update the view even after attempting to refresh

I am facing an issue while trying to develop an angular app where the child state is not loading properly. app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state('home& ...

What could be causing my LESS files not to compile properly in grunt?

I've successfully installed npm and ran npm init. Additionally, I've installed the following packages using npm: grunt grunt-contrib-less grunt-contrib-watch jit-grunt --save-dev My Gruntfile.js configuration looks like this: module.exports = f ...

How can I extract the JSON value as a string?

I have a scenario where I define two objects. The first object, BOB, has properties "name" with a value of "bob" and "height" with a value of 185. var BOB = { "name": "bob", "height": 185 }; The second object, PROPS, references the height property from ...

Retrieve the encrypted URL

I'm facing an issue with extracting parameters from an encrypted URL. When using the queryparams function, it only retrieves a portion of the URL after being decrypted. For instance, consider this example URL: http://localhost:4200/househouse? MGRjYjQ ...

What is the best way to combine the elements within an array with the elements outside of the array in order to calculate their sum?

The goal is to create a function that determines the winner using two input integers. The function should return the first input if it is greater than the second input. function determineWinner(a, b) { let result = [] for (let i = 0; i < 3; i++) ...

Adding the Edit action in React-Redux is a crucial step towards creating a dynamic

I am looking to add an edit action to my blog page in addition to the existing ADD, DELETE and GET actions. Any suggestions on how I can implement the EDIT action to make my blog editable with just a button click? Your help would be greatly appreciated. ...

Interactive elements embedded within an image - digital board game

I'm currently working on integrating a board game into React, and I am facing some difficulties in figuring out how to translate the board squares shown in the image into data. Is there a method through which I can assign unique IDs to each square di ...

Dynamic management of Spring Boot MongoDB Repositories across numerous databases

I was faced with the task of updating my Spring-Boot application to handle dynamically switching between multiple instances of the Mongo driver. The app already has Spring Boot MongoDB Repositories configured, but now we need to implement sass (dynamical ...

Make sure to load the gif image before any other images are loaded from the css

Hey there, I'm attempting to display a GIF image before the actual image loads. I found a great example to accomplish this: Example: Java Script function loadimage(imgsrc, change){ var loadimage = new Image(); loadimage.onload = changesrc(imgsrc, c ...