Displaying information easily with Angular's ngGrid

I'm a beginner to Angular and my knowledge of JavaScript is limited. I'm encountering an issue while trying to display data in ngGrid with the code below. Can you help me identify what's causing the problem?

Essentially, I am fetching data from a web service, transforming it (pivot), and then attempting to present it in a grid.

Please refer to the following:

app.js -> starting point

var konstruktApp = angular.module('konstruktApp', ['ngGrid']);  

dataService.js -> web service call

'use strict';
konstruktApp.service('DataService', function DataService($http){
   var callHttp = function(){
     delete $http.defaults.headers.common['X-Requested-With'];
       return $http.get("http://83.250.197.214/konstrukt.service/Konstrukt.SL.DummyBudgetService.svc/GetDummyBudgetData/");
   };
    return {
        getDummyData: callHttp
    };
});

ngGridController.js -> where the logic resides...

$scope.getData = DataService.getDummyData;
$scope.gridOptions = {data:'result'};
var getData = function() {
    $scope.getData().then(function (response) {
        var res = pivotData(response.data);
        $scope.result = res.data.PivotedRows;

        $scope.columns = res.cols;

        console.log('from the success handler at ' + new Date());
    }, function (reason) {
        console.log('failed: ');
        console.log(reason);
    });

};

..and here is the logic that performs the "pivot" on the data

var pivotData = function(data) {
  // Logic for pivoting the data goes here
};

plnkr: http://plnkr.co/edit/ZqC7696xGbUtuWGIvnYs?p=preview

EDIT: The data correlation between rows and columns seems correct, but there may be an issue with the data in the pivotedArray.PivotedRows array.

Answer №1

Relocating the code to a fresh plnkr proved to be the game-changer. After investing several hours into this task, I can't help but wish for that time back!

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

Every attempt to make an Ajax request ends in failure

I'm struggling with my jQuery script, as the AJAX call always fails and I can't figure out why. Here is the function: <script> function submitLoanApplication() { var time = document.getElementById(&apo ...

AngularJS sends an HTTP GET request which is then transformed into an OPTIONS request

When making a request with headers in AngularJS, the request looks like this: $http.get('http://dev.oms.fetchr.us/order/',{ headers:{ 'Authorization': 'Token ' + token } }) The request is being converted to a ...

When implementing .forEach, an object within the array is mistakenly duplicated

Struggling to populate an array of objects with unique data using the .forEach function to display feedback in the Administrator page of my portfolio. However, encountering an issue where the objects from 'd' are getting duplicated in the 'f ...

Updating the active navbar link with JavaScript in ASP.NET Core Razor Pages

When navigating through my Razor Pages, I need to dynamically change the color of the navbar links. I attempted using JavaScript, but encountered issues with the pages getting rerendered each time, preventing me from toggling the elements. Here's wha ...

Handling error messages with Django and Ajax

Is there a way to display error messages with Django? Here is how I am currently thinking of handling it (using jsonresponse as an example): def test(request): if request.method == "POST": if form.is_valid(): form.save return JsonResponse( ...

JSHow to dynamically access child elements in objects

I am facing a challenge in dynamically accessing a JSObject item: jsonElement = { name:"name", subElement { subElementName: "nameSubElement", } } Currently, I have the element as: //level = "name" jsonElement[level] -> it works //lev ...

Arrangement of 3 points on the graphical user interface

Seeking the orientation of 3 ordered points in space using an algorithm discovered on this site: https://www.geeksforgeeks.org/orientation-3-ordered-points/ Desiring to display the orientation on GUI as Clockwise or CounterClockwise while adjusting coordi ...

Display a div when a selection is made from the dropdown menu - using Ionic

Upon running this code, the expected behavior is to display the second div when an option is selected from the first dropdown list. Similarly, selecting an option from the second dropdown list should reveal the third div. However, the third div does not ap ...

Is it possible to extract the body from the post request using req.body.item?

After working with Express, I learned how to extract body data from a post request. Most examples showed that using req.body.item should retrieve the desired value for tasks like inserting into a table. However, in my case, I found that I couldn't ac ...

Tips on converting comma-separated values into HTML table rows using <tr> tags

JSON Data { "catalog_name": ["Sistem Autodownline ", "Karipap Pusing Ayu"], "price": ["100", "8"], "qty": "", "qty2": ["", ""], "total_qty": "", "total": "", "mem": "10", "email_2": "", "ic_add": "890527-08-6136", "c ...

Is there a way to download and store the PDF file created using html2pdf in Node.js on my local machine?

I have successfully generated a PDF using html2pdf, but now I want to either send it to my server in Node.js or save it directly onto the server. Currently, the PDF is downloaded at the client's specified path, but I also need a copy saved on my serve ...

The Bootstrap modal window refuses to shut down

In my React application, I am utilizing Bootstrap modal functionality. One specific requirement is that the modal window should remain open when clicking on the modal backdrop. To achieve this, I have implemented the following code: $(".modal").modal({"ba ...

How do load functions/methods execute in a specific order?

$(document).ready(), $(window).load(function(), <body onload="load()">, data-ng-init="init()", $(function(){...}); It is a challenge to determine the sequence in which different "load" functions are executed across various browsers. There are approx ...

What is the most effective way to dynamically incorporate external input into a SlimerJS script?

Could use some assistance with SlimerJS. My current program requires intermittent input from stdin to proceed with the next task. The code below functions effectively when using PhantomJS+CasperJS for reading external input, but encounters difficulties wi ...

The camera scene is experiencing difficulties in updating the image

Image not refreshing in a scene. I am using Javascript, Three, and CSS3DRenderer on my client within Chrome. I have embedded an image in a scene via a THREE.Object3D. When the image is updated on the server, it does not update in the scene. I have implemen ...

Unable to access the 'localStorage' property from 'Window': Permission denied

Check out my website www.abc.com Incorporating an iframe in www.abc.com using <iframe src="www.xyz.com"></iframe> An issue has arisen: Error message: "Failed to read the 'localStorage' property from 'Window': A ...

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

JQuery slideshow code is unable to operate when multiple slideshow instances are present

I have been trying to enhance my slideshow code to display multiple slideshows simultaneously. The current code successfully selects and adds/removes the active class for two slide shows, but it fails to smoothly transition between slides after one loop. ...

Sending a XML file from a Vue application to an ASP.NET Core backend using axios

I'm encountering difficulties when trying to upload an xml file using axios to my asp .net server. Below is the code snippet I am using on the vue side to retrieve and upload the xml file: uploadXmlFile(file: any) { const rawFile = new XMLHttpRequ ...

What is the best way to stop form submission in AngularJS when submitting the form by pressing the enter key?

I have implemented validation on my form (which consists of only two fields) but I am struggling to figure out how to prevent it from being submitted with empty data. The current flow is as follows: Upon pressing the enter key, the student's name and ...