AngularJS UI-Grid not displaying JSON data

Just started learning AngularJS and everything was going smoothly until I hit a roadblock...

I have been struggling to display the JSON data returned from my REST service call. While hard-coding a data array in my controller works fine, displaying the actual JSON data has been challenging.

This is the current code snippet...

Web page-

<div ng-controller="ExceptionLogDataController">
    <div ui-grid="gridOptions" class="vertexGrid"></div>
</div>

ExceptionLogDataController-

... ...

I've confirmed that the REST call returns valid JSON data using Postman, so the issue must be in my frontend code.

Making some progress...

Successfully retrieved the JSON object and attempting to display it with the following code...

$scope.data = [];
$scope.gridOptions = {
    enableSorting: true,
    data: 'data',
};

ExceptionLogDataService() //Call to Service that returns json object
.then(function (data) {
    $scope.data = data;
    $scope.gridOptions.data = $scope.data;
    console.log($scope.data);
}

Here's the JSON object returned from the console.log call...

Object { DataId: 1074, SourceDateTime: "2016-01-19T13:29:01.2512456-05:00", MessageText: "There is an error in XML document (…", IsDirty: false, StatusList: Object, FileName: "D:\ProdMonitorSiteDev\ErrorFiles\…", GenJIRATicket: false, MessageCount: 1, MachineName: "VERTEXCUTIL01", AppDomainName: "", 2 more… }

Encountering this error...

Error: newRawData.forEach is not a function

javascriptangularjsjsonangular-ui-grid

Answer №1

After carefully examining the JSON object returned from my service, I realized that it was wrapped in curly braces '{}'. This was the reason behind the error I was experiencing with newRawData.forEach. To solve this issue, I took the following steps...

.then(function (data) {
    $scope.data = "[" + JSON.stringify(data) + "]"; // Encapsulating my object with square brackets '[]' allowed me to use JSON.parse to parse the string into a JSON object...
    $scope.data = JSON.parse($scope.data);

    // Success! It worked perfectly...
    $scope.gridOptions.data = JSON.stringify($scope.data);

Answer №2

No need to worry about parsing the JSON yourself.

$http.get(url)
.success(function (data) {  
    $scope.gridOptions.data = data;
}

Simply use this code snippet and it should work perfectly for your needs.

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

Error: Unable to execute $(...).stellar since it is not a recognized function

Having some trouble implementing the stellar plugin. I've included all the necessary js, but keep getting an error in the dev tools console: 'Uncaught TypeError: $(...).stellar is not a function'. Here's what I have in the head tags: ...

javascriptjqueryhtml

What are some ways to slow down the speed of a canvas animation?

I am currently working on an animation project using JavaScript and canvas. I have a reference fiddle where objects are generated randomly and fall from the top right corner to the bottom left corner, which is fine. However, the issue is that the objects a ...

javascriptjquerycsshtml5-canvasfabricjs

"Dealing with Protractor's promises can be a headache when trying to

Our web tool features multiple html forms, each encompassing a set of form fields. I am exploring ways to use Protractor to extract the list of field labels, input types (such as textboxes, select dropdowns, radio buttons), and input controls for setting v ...

angularjsprotractorangular-promise

Adding images sourced from the News API

I have successfully integrated an API from newsapi.org, and it's functioning well. However, the data I receive is only in text format and I would like to include images for each headline. I'm unsure of how to do this since the headlines are dynam ...

jqueryhtmljsonajax

Component does not detect change when the same number is sent as input

Let me paint you a picture: I have this nifty component, set up with the OnPush strategy, that showcases a PDF document, sliding through pages one by one, and granting users the ability to smoothly glide through pages and jump to specific ones. It even of ...

javascriptangularangular-changedetectionngonchanges

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...

javascripthtmljquerycss

What is the best way to retrieve a JSON value when there are multiple keys with the same name

Let's consider the following JSON data: let myJSON = { "id" : 001, "firstName" : "John", "firstName" : "Jane", "lastName" : "Doe" } If we call myJSON.firstname, it will return "Jane". The query now is, how can we retriev ...

json

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

javascripthtmlangularjs

What is the most effective approach to building this function in React JS rather than the existing .map method?

Hello, I'm fairly new to all of this so please bear with me. I've been working on developing a search function for my app, but I've encountered a problem. The search function in my header component is being rendered like this in my index: &l ...

javascriptnode.jsreactjsmongodbnext.js

What is the best way to pass the value of a selected option to an express server

<label for="exampleFormControlSelect1"> <strong>Please Select the Number of PDFs to Merge:</strong> </label> <select class="form-control" id="exampleFormControlSelect1"> <option name=" ...

javascriptexpressmulter

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...

javascripthtmltypescriptdomtouch

Angular is used to call a function that captures a specific div and then waits for the capture to be completed before

I'm facing a challenge where I need to handle the capturing of a div using a method called capture() within another method. Take a look at the code snippet below: theimage; // declaring the variable callcapture() { // perform certain actions t ...

javascriptangulartypescript

The mysterious workings of the parseInt() function

As I begin my journey to self-teach JavaScript using HeadFirst JavaScript, I've encountered a minor obstacle. The chapter I'm currently studying delves into handling data input in forms. The issue arises when I attempt to utilize the updateOrder( ...

javascripthtml

splitting xmlhttp.responsetext using loops

Currently, I have a JavaScript function that utilizes xmlhttp.responsetext to fetch data from MySQL. This data is then used to populate form fields in a dropdown menu, which has been functioning perfectly so far. However, the issue arises when I attempt to ...

phpjavascriptwhile-loopxmlhttprequest

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

Hello there! I'm currently working on creating a status bar where I can add an image after another image. Let me explain my idea clearly. So, I have two images in GIF format: one is white and 10x10px, and the other one is black and also 10x10px. On ...

javascripthtmlcssimagetags

Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

Using position: sticky has been a game-changer for me. It resolves many issues without the need for JavaScript. However, I've encountered a roadblock. I am trying to create a sticky element that is nested inside multiple <div> elements. Since po ...

javascripthtmlcss

Obtain precise JSON information using Node.js

Having limited experience with Angular JS and Node JS, I find myself in need of assistance. On the server side, I have multiple JSON files containing language translations. Based on a client's request for a specific language, such as French, I must re ...

javascriptjsonnode.js

Issue with undefined arrays in the Angular merge sort visualization tool

I am currently working on developing a visualizer for sorting algorithms using Angular. However, I have encountered some difficulties while implementing merge sort. As a Java programmer, I suspect that there may be an issue with my TypeScript code and the ...

javascriptangularjsangulartypescript

In terms of AngularJS, what would be the most recommended method for transferring data from a controller to a directive or set

In my project, I have created an Article Item page that consists of multiple re-usable directives. One specific section on the page includes a collection of these directives to form the main article content. <div data-ng-controller="ArticleItemControll ...

angularjs

Efficiently encode and decode JSON data between PHP and JavaScript

I am attempting to convert my array results into JSON format and then transmit them to an AJAX success event using JavaScript. PHP $results = array( "time1" => 1, "time2" => 2, ); echo json_encode($results); JAVASCRIPT ...

phpjavascriptjqueryajaxjson