Displaying information on an Angular user interface grid

I am facing an issue with displaying data in a UI grid table.

I have set up an API through which I can access the data in my browser, but I am encountering difficulties when it comes to rendering the data. Below is my Angular controller where I have defined a function to fetch data from the API:

        getData();

        $scope.myData = [];

        $scope.gridOptions.data = []

        $scope.gridOptions.data = $scope.myData; 

        function getData() {
            $http.get('/load/').success(function (data) {
                data.forEach( function( row, index ) {
                    $scope.myData.push(data);
                });
                $scope.gridOptions.data = data;
                console.log('data from api', data);
            })
        };

However, when I try to display the data on the grid, it appears empty. https://i.sstatic.net/BVlDw.png

The data is visible in the console: https://i.sstatic.net/LXGoV.png

I also attempted to parse the data using var jsonObj = JSON.parse(data);, but encountered an error Unexpected token o at Object.parse (native)

javascriptangularjsjsonangular-ui-grid

Answer №1

Utilize the following function to populate an array with your data. Examine the data in the console and explore its contents by clicking on the arrow icon. While my data is stored within the .doc attribute, yours might be under a different attribute. Modify the "items[i].doc" reference to match the appropriate attribute for your specific data.

// Pass data.rows to the fncArray function as parameters
// Use 'type' to filter the data
function fncArray(items, type) {
    var filtered = [];
    for (var i=0; i < items.length; i++)  {
        if (items[i].doc.type === type){
            filtered.push(items[i].doc);
        }
    }
    // console.log(filtered);
   return filtered;
}

This version is for use without any filtering applied

// Provide data.rows as input to the fncArray function 
function fncArray(items) {
    var newData = [];
    for (var i=0; i < items.length; i++)  {
            newData.push(items[i].doc);
    }
   return newData;
}

Answer №2

Using $scope.$apply() in your code will help initiate updates within the controller.

Answer №3

The expected format for the returned data is an array with objects inside, like ["key":[object, object, object, object]]. To convert this data, you can utilize the following syntax: var jsonObj = JSON.parse(data); For successful execution, include this expression in the success section: 

!$scope.$$phase?$scope.$apply():null;

Answer №4

Apologies everyone, my error was in not correctly defining the columnDefs within the controller. No parsing is necessary in this case. :facepalm:

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

When using create-react-app with JEST to run tests, TypeScript errors are not displayed

When I write incorrect TypeScript code in my project set up with create-react-app, running tests using npm test does not show any errors in the terminal. Is this normal behavior? It would be helpful to see these errors to avoid writing incorrect TypeScript ...

javascriptreactjstypescriptjestjscreate-react-app

Displaying JSON as a table using React JS

I can't seem to display JSON data in a table using the useState hook in React, and I'm not sure why. Here's a snippet from my React file: {` import React, { useState } from 'react' import "../styling/Classes.css"; import data ...

javascriptreactjsjson

Error encountered when running the production build server for android in Meteor: TypeError - Unable to access property 'slice' of null

Here's a demo I'm working on: https://github.com/pc-magas/pupAndroidDemo I'm trying to build this demo for Android. I've already installed the Android SDK and configured the necessary environmental parameters. Following the instructio ...

javascriptandroidnode.jsmeteor

Initiating a horizontal scroll menu at the center of the screen: Step-by

I need assistance setting up a horizontal scrolling menu for my project. The requirement is to position the middle button in the center of the .scrollmenu div. Currently, I am working with HTML and CSS, but open to suggestions involving javascript as well ...

javascripthtmlcss

Implementing Jquery Ajax Autocomplete Feature in JSP

I am currently exploring a tutorial on jQuery autocomplete using remote data. In my JSP page, I have the following code snippet: (getData.jsp) Department t = new Department (); String query = request.getParameter("q"); List<String> ...

jsonjspjqueryautocomplete

Tips for successfully executing JMeter tests on weekdays with dates in the format yyyy-MM-dd

Looking to include a date parameter in the json payload for validation purposes, specifically to restrict it to weekdays only. { "name": "PICKUP_DATE", "value": "${__timeShift(yyyy-MM-dd,,P1D,,)}" } Is th ...

javajsonjmeter-5.0

What is the best way to extract the text from a <div> tag and show it in a different div when clicked on using ng click in AngularJS?

When the button is clicked, the text in ng-model=name should be displayed in the <h2> tag. <div ng-model="name">This is a text</div> <button ng-click="getname()">Click</button> <h2>{{name}}</h2> ...

jqueryhtmlangularjsangularjs-directiveangularjs-scope

Server Side Search Request in Angular Datatables Not Returning Expected Data Object

Issue I'm currently facing an issue with server-side pagination and search functionality. The pagination works correctly, but when I enter a search query in the search box which triggers a request to the server, it returns an empty object while still ...

angularjsangular-datatables

How to use Javascript, HTML5, and AngularJS to display and print a PDF document within a

I have a situation where I need to load a Base64 encoded PDF as a String from my server into JavaScript in my client application which is built using AngularJS and HTML5. The structure of my HTML code is as follows: <div id="printablePdfContainer"> ...

javascripthtmlangularjspdf

Adjust the contents of a DIV depending on which Toggle button is selected

When a user clicks on either "Twin Bed" or "King Bed", the content inside the "demand-message" should change to either "high demand" or "Only ??? rooms left". The ID will remain the same for both buttons due to existing logic. However, the message display ...

javascriptjqueryhtmljson

NodeJS plus AngularJS utilizing the $http GET request

I'm currently working with Nodejs and AngularJS, and I've encountered an issue regarding populating a table in the front-end from a generated JSON file. Below is my ejs file: <% include layout %> <div class="panel panel-info"> < ...

angularjs

How to dynamically add attributes in Angular based on certain conditions

Is there a way to utilize the $scope in order to determine whether an attribute should be utilized in angular? Here is my current scope setup: fields: [ { label: 'First Name', name: 'firstname', ...

angularjs

Tips for utilizing a variable from a function in one file within a function in another file

Having trouble using the variable counter from one function in a different file? In the first function, I defined counter without using "var" thinking it would make it a global variable. But for some reason, it doesn't seem to work. Help needed! //fun ...

javascriptfunctionvariablesglobal-variablesglobal

Husky and lint-staged failing to run on Windows due to 'command not found' error

I'm facing issues with getting husky and lint-staged to function properly on my Windows 10 system. Here's how my setup looks like: .huskyrc.json { "hooks": { "pre-commit": "lint-staged" } } .lintstagedrc ( ...

javascriptnpmhookhuskylint-staged

The range slider's color value is not resetting correctly when using the <input>

Before repositioning, the slider is at this location: (both thumb and color are correctly positioned) https://i.stack.imgur.com/J3EGX.png Prior to Reset: Html <input id="xyzslider" class="mdl-slider mdl-js-slider" type="range" min="0.0" max="1.0" va ...

javascriptjqueryhtmlcssslider

Parse the local JSON file and convert it into an array that conforms to an

My goal is to extract data from a local JSON file and store it in an array of InputData type objects. The JSON contains multiple entries, each following the structure of InputData. I attempted to achieve this with the code snippet below. The issue arises ...

jsonangulartypescript

Can Angular components be used to replace a segment of a string?

Looking to integrate a tag system in Angular similar to Instagram or Twitter. Unsure of the correct approach for this task. Consider a string like: Hello #xyz how are you doing?. I aim to replace #xyz with <tag-component [input]="xyz">&l ...

javascripthtmlangulartypescript

Pressing a specific button triggers a broadcast signal, prompting a modal window to pop up and display relevant information

Within my website's HTML page named rollup.html, there exists a button that triggers the opening of a modal. <button id="myBtn" ng-click="printDivModal('rollup-tab')">ModalTest</button> In the accompanying JavaScript file, roll ...

htmlangularjstwitter-bootstrapbootstrap-modalbroadcast

Problem encountered with nested JSON handling in PHP

I'm so close to successfully generating JSON from a MySQL query, but I'm encountering some challenges along the way. $results = []; foreach ($getbill as $row) { $category = $district; $building = $row['building']; if (! ...

phpmysqljson

What is the best way to transfer an integer from my main application to a separate JavaScript file?

Currently, I am developing a complex code using React Bootstrap and focusing on creating a Dropdown list that fetches data from the backend database. <Dropdown> <Dropdown.Toggle variant="success" id="dropdown-basic"></D ...

javascriptarraysreactjsundefinedreact-bootstrap