Customize ui-grid.js to display only selected columns

I am working with JSON data from a REST response that contains multiple parameters, some of which are nested. However, I only want to display specific ones.

Is there a way to hide all parameters and only show the specific ones I need? Currently, all parameters are being displayed as columns.

I do not want to manually hide each parameter using excludeParameters or setting columnDef visible = false, as the list of parameters may vary depending on the REST response.

Do you have any suggestions for how I can achieve this? My goal is to set the default visibility of parameters to false and then selectively display the ones I want by setting columnDef visible to true. Does anyone have a solution for this?

Thank you in advance, Chris

javascriptangularjsangular-ui-grid

Answer №1

Here is how I have set up my table options:

    $scope.tableOptions= {
        data : [],
        columnDefs :[
            { field : 'firstName'},
            { field : 'middleName'},
            { field : 'lastName' }
        ]
     }

I am utilizing the directive like this:

<div ui-grid="tableOptions"></div>

Once the API retrieves the results, they will be displayed in the data field of $scope.tableOptions.

In my scenario, each JSON object contains more than 10 fields, but the table only displays the three fields defined in columnDefs.

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

Understanding how to retrieve a particular list item in JQuery without having the index in advance

I have a lengthy list that is broken down into various subheadings. How can I retrieve the second to last element of the list before a specific subheading, provided it is not the final element? Is it possible to do this if I know the ID of the subheading? ...

javascriptjquery

how to implement dynamic water fill effects using SVG in an Angular application

Take a look at the code snippet here HTML TypeScript data = [ { name: 'server1', humidity: '50.9' }, { name: 'server2', humidity: '52.9', }, { name: 'server3', humidity: ...

javascripttypescript

Show a portion of decimal numbers without altering their true numerical values

Currently, I am immersed in a web project that involves incrementation animations. To achieve this, I have devised a counter function similar to the one shown below: const counters = document.querySelectorAll('.counter'); counters.forEach ...

javascripthtmlcss

Verify if item is currently on wishlist

Is there a way to verify if products have been added to the wishlist for logged in customers? I would like to display the result on a twig file, showing whether the product is already on the wishlist. button color=red else button color=gray In addition, ...

javascriptphpajaxcontent-management-systemopencart

Performing two consecutive nested AJAX requests in jQuery using JavaScript

I am facing an issue with my code. My goal is to create a cryptocurrency ranking feature on my website. I have integrated an API that provides logos, symbols, indices, prices, etc. of cryptocurrencies. However, I encountered a problem as this API doesn&apo ...

javascriptjqueryhtmlajax

The integration between Laravel and Vue.js seems to be causing issues with locating the CSS and JS files

I am currently working on a Laravel + Vue.js project that I need to enhance. Unfortunately, I cannot share the code due to NDA restrictions. The project consists of an API in Laravel and a front end in Laravel using Vue. After committing the project, updat ...

javascriptphpnode.jslaravelvue.js

When the AngularJS model is modified, the select element does not reflect the changes

After updating the model, I am encountering an issue where a select box is not reflecting the value in the model. Even though all valid options are present in the select box, the value from the model is not being selected. In this particular example, the v ...

angularjs

Steps for incorporating extra attributes based on the given text

Here is some of my HTML code: <div id="ccc_new_val_hdn"> <span>9</span> <span>,</span> <span> </span> <span>6</span> <span>2</span> <span>1</span> </d ...

javascriptjqueryhtml

"Encountered an Unspecified Variable Error in executing document

Every time I open my Chrome console, it keeps showing an error message saying "toggleOnlyRelatedPosts is not defined". The script I'm working on doesn't seem to be functioning properly. I've added so many variables that I now feel lost and o ...

javascriptjson

Using Google Maps to trace a line showing the distance traveled

I want to create a 'distance traveled' polyline along a set route using V3 of the Google Maps API. The polyline should pass through multiple waypoints/legs. Currently, I am using the DirectionsService to draw the entire route. In addition, I a ...

javascriptgoogle-mapsgoogle-maps-api-3google-polyline

Utilizing Angular to efficiently download and showcase PDF files

Presently utilizing https://github.com/stranger82/angular-utf8-base64 as well as https://github.com/eligrey/FileSaver.js/ for the purpose of decoding a base64 encoded PDF file that I am fetching from a rest API. It successfully decodes and downloads, ...

javascriptangularjspdf

Encountering difficulties in deploying the React application on Github Pages

I've run into an issue while trying to deploy a basic react application. It was successful the first time, but after updating my code on GitHub and attempting to execute 'npm run deploy', it failed https://i.sstatic.net/JlEvm.png Here is m ...

javascriptreactjsdeploymentweb-applicationsgithub-pages

Identify finger press on a JavaScript canvas

I currently have this code setup: <canvas id="canvas" width="400" height="400" style="border:2px solid; background-color: #2c2c2c;"></canvas> <input type="button" value="Cl ...

javascripthtmljquerycanvas

Python responding to an Ajax request using jQuery

Currently, I am experimenting with integrating a pre-built inline editor from the following source: https://github.com/wbotelhos/inplace Regrettably, the available support documentation is lacking and my expertise in Javascript, jQuery, or Ajax is limited ...

javascriptpythonjqueryflask

Passing an array to a view is not possible when working with asynchronous methods

I am currently working on developing a Dapp that is connected with the Ethereum Blockchain. Within this project, I have created a JavaScript function that invokes asynchronous methods. async function getFiles(id, array){ if(id < 2){ myContr ...

javascriptarraysasynchronousmeteorhelper

Issues with Jquery Checkboxes Functionality

Hi everyone, yesterday I had a question and since then I have made quite a few changes to my code. Right now, I am attempting to make some JavaScript work when a specific checkbox is checked. However, nothing is happening when I check the checkbox. Can any ...

javascriptjqueryif-statementcheckbox

Unexpected performance issues with Async-WaterFall function

Waterfall function involving two calls, where the second one does not wait for the first one to finish completely. The first call includes a mongodb.find() operation. app.get("/news", function(req, res) { async.waterfall([ function (callback) ...

javascriptnode.jsmongodbasynchronous

Maintain Angular Dropdown Menu Open Across Page Refresh

I am currently working on an HTML/Typescript view that is connected to a SQL Database. Whenever there are changes made to the database, the entire webpage reloads. The issue we are facing is that we have dropdown menus on the page that clients want to rema ...

javascripthtmlsqlangulartypescript

Is the "json_encode" function dropping the '+' character when using "json.parse"?

Seeking Assistance I have a question regarding the functionality of php function json_encode and js JSON.parse. I seem to be encountering an issue where the '+' character is being dropped somewhere in the process, particularly when dealing with ...

phpjavascriptjson

Generate a PHP array from MySQL data and subsequently transform it into a JavaScript array

I am trying to generate an array using data retrieved from a MySQL database. The purpose is to construct a data tree utilizing Treant JS, which seems to be the most suitable method I found. It appears that I need to first create the array in PHP and then u ...

javascriptphpmysqlarraysdatabase