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

html scroll to the flickering page

Why is it that when a user clicks on a link in the list, the browser flickers? This issue becomes especially noticeable if a user clicks on the same 'link' twice. Is there a solution to prevent this from occurring? The problem also seems to aris ...

javascriptjqueryhtmlcss

Removing a row from MySQL using JQuery Ajax

Hello there! I'm currently facing an issue while trying to remove a row from a MySQL database using PHP and AJAX. I initially thought it would be a simple task with $.ajax {}, but unfortunately, the row is not getting deleted for some reason. Here&apo ...

javascriptphpjquerymysqlajax

Getting the width of an element using a React ref is a helpful technique that allows you

I am struggling to retrieve the width of a select field using React Ref. this.selectRef.current is returning an object, but I can't seem to find a way to access the width of the element. <Select fullWidth ref={this.selectRe ...

javascriptreactjsmaterial-ui

What strategies can I employ to prevent autocoercion in Couchbase queries?

In conducting an N1QL query, there is a filter that states WHERE myField < $value. Throughout my experimentation, I have noticed that Couchbase has a certain order for types: boolean < integer < string < JsonArray, despite the fact that they ...

jsoncouchbasesql++coercion

Changing the contents of NamedTemporaryFile in Python 3

I'm encountering a challenge when trying to modify the content of a NamedTemporaryFile after its initial creation. In my specific case, I am creating a NamedTemporaryFile from JSON data retrieved from a URL. My objective is to later open and edit th ...

pythonjsonfile-iotemporary-files

Struggling to decipher JSON using jQuery proved to be quite challenging

JSON object (parameters) "selectedShopeNumber":1765653589, "shopeNumbersForSelectedNames":[], "shopeNumbers":[1765653589, 660791222],"shopeNames":["Shope 1","Shope 2"] code var params = JSON.parse("[" + parameters + "]"); for (var i = 0; i < params.s ...

jqueryjsonparsingfor-loopformat

Error encountered while trying to access OData feed in Tableau 8.1 due to incorrect OData format

Having difficulty connecting to an OData feed, I keep receiving this error message: "Bad OData Format. Ensure you are using a URL that directs to a valid OData Source." I am able to access the URL in a browser (and receive the correct JSON response), and ...

jsonexcelasp.net-web-apiodatatableau-api

Concealing certain columns when the table exceeds a certain size

Hello everyone, I am just starting out in the world of React and web applications. Please feel free to reach out if anything is unclear to you. Here is the table structure that I currently have: <div> <table id="mytableid" className=&qu ...

javascriptreactjs

Retrieve an array from a JSON file obtained from a web request using Python

I am looking to retrieve real-time quotes from a particular page using Python 3. You can find the page here. The quotes are stored in a JSON file within an array called "JsonData". My goal is to access the value stored in LTP within this JSON file. from ...

pythonjsonwebfetch

Send your information to a JSONP endpoint

Can data be posted to JsonP instead of passing it in the querystring as a GET request? I have a large amount of data that needs to be sent to a cross-domain service, and sending it via the querystring is not feasible due to its size. What other alternati ...

javascriptjqueryajaxjsonjsonp

using eloquent in vuejs to fetch database columns

I am currently attempting to retrieve data from a database using an AXIOS get request. I have two models, Content and Word, which have many-to-many relationships. In my controller, I am trying the following: public function fetchCourses(){ $dayOne = C ...

javascriptphplaravelvue.jseloquent

Retrieving the selected value from a dropdown menu without having to click on a

I'm facing an issue with 2 dropdown menus outside of an HTML table that is generated by PHP code. There's a submit button within this table, and here's how it's set up: <!doctype html> Select Year: ...

javascriptphpjqueryhtml

Transform the JSON data into a collection of unique objects in a Flutter application

Currently, I am working on saving and retrieving a list of custom objects to and from shared preferences. Below is the code for my save function: save(String key, value) async { final prefs = await SharedPreferences.getInstance(); prefs.setString(key, j ...

jsonflutter

Can the value of a variable be passed as seen in the JavaScript code snippet?

I'm wondering if I'm on the right track with generating random colors when a button is clicked. Here's my code: randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); // --- more code --- changeHeaderColor() { con ...

javascriptreactjs

Using a table row as a counter in HTML

I am looking for a way to automatically assign IDs to table rows using XSLT in a systematic manner. The idea is to have the ID consist of a string followed by a counter, like this: <table> <tr id="Row1"> # it can be only a number => id=" ...

javascripthtmlxmlxslt

The Evolution of Alternatives to contentEditable

Related: ContentEditable Alternative I am curious about the timeline of online WYSIWYG editors prior to the existence of contentEditable. I remember using GDocs and GMail with rich-text features that functioned similarly to contentEditable. I would appre ...

javascripthtmlcontenteditable

What is the best way to handle a very large JSON output in Node.js?

Working with shell.js to run unix commands in node.js and using bull for task queuing. The process involves providing an array of tasks: { "tasks": [ { "name": "task1", "command" ...

javascriptnode.jsjsontask

Creating a mapping in Node.js to write to a serial port and then retrieve the

Currently, I am utilizing the node-serialport module for serial port communication. My goal is to send the command ATEC and receive a response of ECHO. However, the process of sending and receiving data is asynchronous (after sending the data, the timing ...

javascriptnode.jspromise

When using the map function, I am receiving an empty item instead of the intended item based on a condition

Need assistance with my Reducer in ngRx. I am trying to create a single item from an item matching an if condition, but only getting an empty item. Can someone please help me out? This is the code for the Reducer: on(rawSignalsActions.changeRangeSchema, ...

javascriptangulartypescript2.0

How to send parameters through the Google Maps API URL using Vue.js

When using $router.push(), I receive two parameters: {{ this.$route.params.lat }} and {{ this.$route.params.lng }}, which are latitude and longitude coordinates. To access a Google Maps URL, I need to include both of these parameters: https://maps.googlea ...

javascriptvue.js