AngularJS display of SQL Server PIVOT table results

I am facing a challenge in returning data from the SQL server to the view. My question is about how to dynamically return column titles from the database to a table in an Angular app view. As new entries are added to the person table in the database, new columns with corresponding names should be added to the pivot table.

On the server side, I am using C# ASP.NET WebAPI 2 and SQL Server 2012, while on the client side, I am utilizing AngularJS.

The REST Service integrates with a Stored Procedure in the SQL Server.

For example, the standard table structure looks like this:

firstname | lastname | age |
John      |    Doe   |  20 |
Peter     |    Keller|  19 |
Chris     |    Brown |  30 |
Christy   |    Buzzy |  20 |
Phil      |    Brown |  34 |
.....

And the PIVOT table format is as follows:

age | Doe | Keller | Brown | Buzzy ....
34  |  0  |    1   |   1   |   0
...
30  |  4  |    0   |   1   |   0
...
20  |   1  |    0   |   0   |   0

This table shows, for instance, that there are 4 people aged 30 with the last name "Doe" and so on.

Answer №1

<table class="table table-striped no-margin">
<thead>
     <tr>
          <th>Years</th>
          <th ng-repeat="n in names">{{n.firstname}}</th>
     </tr>
</thead>
<tbody>
      <tr ng-repeat="y in years">
         <td>{{y.year}}</td>
         <td ng-repeat="q in quantity track by $index">{{q.quantity}}</td>
      </tr>
</tbody>
</table>

Hope this meets your requirements. Utilize ng-repeat for customizing your headers.

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

Can AngularJS be integrated with prototype methods and variables?

When working with AngularJS, the majority of logic is typically based on the $scope: function Ctrl($scope) { $scope.name = "Freewind"; $scope.hello = function() { alert($scope.name); } $scope.method1 = function() {} $scope.metho ...

JavaScript unable to remove cookie from system

I'm currently on an external website and attempting to use JavaScript to remove a cookie. Here's what I tried in the console: function deleteAllCookies() { var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length ...

Using numerical symbols in multiple tooltips to convert dates into timestamps in the R programming language

When using the highcharter package in R, I am attempting to plot multiple line charts simultaneously. The challenge arises when dealing with different datasets containing values ranging from millions to billions, requiring a numeric symbols formatter imple ...

The textarea field activates a select event listener whenever a button or link is clicked within the DOM

My DOM structure is pretty straightforward, consisting of a textarea, some buttons, and links. I've attached a select eventlistener to the textarea to monitor text selection by the user. const summary = document.getElementById("summary"); summary?. ...

Ajax RSS Feed - Weather Data from OpenWeatherMap

I am encountering an issue where the feed does not refresh with new news as they come in, even after selecting an option. This same problem is also occurring with openweather. I suspect that everything is being cached when it shouldn't be. Should I ch ...

JavaScript recording speed

I am currently working on a project that involves video recording on my website. After creating a canvas and pushing the recorded frames to it, I have encountered an issue. The playback of the video is too fast - a 10-second video plays in around 2 second ...

What is the best way to extract the text from a label using Selenium?

It seems like I can select the element using CSS Selector, Xpath, or TagName, but I'm having trouble retrieving the associated text. Here is a snippet of the HTML code: <label for="AnswerText">This is the question text? </label> In my c ...

Validation in Laravel appears to be ineffective when managing schedules

I have a table that contains schedules for each subject. I want to ensure that every schedule is unique and not duplicated. The table includes columns for room, teacher, time, day, and checker who verifies the schedule. It's essential that there are n ...

Tips for styling text in a Discord.js embed when utilizing the variable `desc` with the value of `text`:

How can I add code markdown format like `Lorem Ipsum` into the description of my embed created in discord.js? The issue is with Grave Accents as it interferes with the existing "let desc =`raw text not in code format`". I'm still learning an ...

An error occurred in tracking the entity type 'IdentityUser' due to a conflicting instance with the same key value being already tracked

Having encountered an issue while updating IdentityUser via UserManager in a simple project I created using Identity. The instance of entity type 'IdentityUser' cannot be tracked because another instance with the key value '{Id}' is a ...

Troubleshooting Vue 3: Dealing with Synchronization Issues Between Keyboard Input and

I am currently working on a Vue 3 autocomplete component and I've come across a strange issue that I can't quite figure out. The component emits two events: "update:search" to update the search variable in the parent component, and "change" whic ...

What are the reasons behind the jQuery file upload failing to work after the initial upload?

I am currently utilizing the jQuery File Upload plugin. To achieve this, I have hidden the file input and set it to activate upon clicking a separate button. You can view an example of this setup on this fiddle. Here is the HTML code snippet: <div> ...

The browser does not automatically set the Cookie

Trying to login involves making an API call using a POST HTTP request. post( postLogin(email), JSON.stringify({password: passwd}), { headers: { "Content-Type":"application/json" }, credentials: 'include' // also attempted with &a ...

"Implementing form validation, utilize JavaScript to dynamically insert an unordered list containing list items (li) into a specified div

When validating a login form, I encountered a challenge with displaying errors using an unordered list for each validation error such as an incorrect username or email format. I am familiar with input validation but struggling with incorporating an unorder ...

What is the process for verifying a checkbox after it has been selected?

I simplified my code to make it easier to understand const [factor, setfactor] = useState(1); const [nullify, setNullify] = useState(1); const Price = 10; const Bonus = 15; const finalPrice = (Price * factor - Bonus) * nullify; // start ...

Revamping Modal Interface for CRUD Operations (React / C# / Entity Framework Core)

After successfully implementing Create, Read, and Delete operations in my project using C# and Entity Framework Core, I encountered a roadblock while trying to update data. Despite updating the data as expected, I keep facing an issue at the .CommitAsync() ...

Discover the process of dynamically importing JavaScript libraries, modules, and non-component elements within a Next.js

Lately, I have been utilizing Next.js and mastering its dynamic import feature for importing components with named exports. However, I recently encountered a particular npm package that functions only on the client-side (requires window) and has a substant ...

Is it possible to extract elements from a single list and insert them onto various pages?

Currently, I am retrieving items from a list using an ajax call. After constructing the HTML content, I insert these items onto a page. Now, I want to extract the same items and display them on another page with a different style. Is there a method to conn ...

What is the best way to transform a ReadonlyArray<any> into an array of any type?

There are certain native angular functions that return a ReadonlyArray, while some native angular callbacks pass ReadonlyArrays as well. Given that my typescript code may be utilized in various scenarios, I prefer not to mandate that all arrays passed to m ...

What methods can you use to locate the CSS selector within HTML that meets certain criteria?

Is it possible to parse a given link and find CSS selectors with attributes that partially or completely match a specific keyword? For example, if the keyword is "print," I want to identify all CSS selectors in the link containing "print" in their name, id ...