I require the ability to retrieve only the data from a UI grid column, specifically based on the column name selected

I need help with my angularjs application that utilizes Ui grid. There is an external dropdown menu located outside of the ui grid, which lists all the column names in the grid. I want to be able to select a specific column name from this dropdown and retrieve only the data from that column in an array format. Is there a straightforward method to achieve this?

As seen in this example at , if I were to choose 'name' from the dropdown, I would like to retrieve ['Sandoval Mclean', 'Nieves Mack', ...]. Similarly, if I were to choose 'email', I would expect to get ['[email protected]', '[email protected]', ... ]

javascriptangularjsangular-ui-grid

Answer №1

Example Code

This method is quite simple, just create your dropdown based on the columnDefs so that you are sure to access valid object properties and then iterate through them when the dropdown changes:

HTML:

<select ng-model="selectedColumn" 
  ng-options="opt.name as opt.name for opt in gridOptions.columnDefs"
  ng-change="onColSelect()"></select>

<ol>
  <li ng-repeat="obj in myData track by $index">{{obj}}</li>
</ol>

JS:

$scope.onColSelect = function (){
     $scope.myData = [];
    angular.forEach($scope.gridOptions.data, function (row, key) {
      $scope.myData.push(row[$scope.selectedColumn]);         
});

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

Is it possible to refrain from using the object variable name in an ng-repeat loop?

When utilizing an ng-repeat directive to loop through an array, the syntax requires ng-repeat="friend in friends". Inside the template, you can then use the interpolation operator like this {{friend.name}}. Is there a way to directly assign properties to ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Running jQuery code within an AngularJS directive's templateUrl

I am facing an issue where my jQuery code, embedded within an AngularJS directive HTML template, is not functioning as expected. Neither alert("testA"); nor alert("testB"); are being triggered in the provided code snippet. I suspect that the problem lies ...

jqueryangularjsangularjs-directive

Utilizing ngClassEven and ngClassOdd in Angular 2 for Improved Styling

I attempted to replicate the behavior of ng-class-even and ng-class-odd (originally from Angular 1) in my Angular 2 application. Below is the code I wrote and it's functioning correctly, but I'm curious if there are alternative methods to achiev ...

angularjsangularangularjs-ng-class-evenangularjs-ng-class-odd

The edges of shapes created with ThreeJs appear to have a fuzzy or blurred outline

Trying to create a cube in ThreeJs using Box Geometry, but encountering strange and shaky lines. Even setting wireframe to false doesn't resolve the issue, as the edges remain problematic. https://i.sstatic.net/sUPAX.png Currently utilizing WebGlRen ...

javascriptthree.js

What is the mechanism through which the subtraction operator initiates the conversion of an array to a

Here are a couple of examples showcasing my code. Let's start with the first one: console.log([4] + 10); //"410" It is commonly known that the addition operator can only work with numbers and strings. Therefore, in this case, [4] needs to b ...

javascriptarraysstringnumbers

Troubleshooting: The issue of Vue JS not successfully navigating between web

After countless attempts, I am still struggling to get my Firebase login function to appropriately switch the component upon signing in. I urgently need assistance with configuring my router to seamlessly transition to the next page once the sign-in proces ...

javascriptfirebasevue.jsfirebase-authentication

Utilizing data transfer in Angular

On my hotel website, visitors can view information about a hotel and click "book" to navigate to the booking page. Once on the booking page, users are prompted to enter their name and other details. However, I also want to include additional data from th ...

angularjs

Is it possible to direct users to varying links based on their individual status?

import React from "react"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import Link from "next/link"; import { cn } from "@/lib/utils"; import { FaCircleChec ...

javascriptnext.jsjsxclerk

Typescript error encountered when executing multiple API calls in a loop causing Internal Server Error

I'm relatively new to Typescript/Javascript and I am working on a function called setBias(). In this function, I want to set all indices of this.articles[i].result equal to the biased rating returned by the function getBiasedRating(this.articles[i].ur ...

javascriptangulartypescriptapifetch-api

Shopping cart development using AngularJS with Ionic Framework

I am currently in the process of developing an online marketplace app. I have successfully implemented the shopping cart functionality, although I am unsure of how to integrate it into my Ionic/AngularJS platform. Are there any resources or solutions avail ...

angularjsionic-frameworkshopping-cart

Creating a JSON file using an object to send requests in Angular

In my Angular 7 project, I am trying to send a multipart request to the server that includes a file (document_example.pdf) and a json file containing a data object (data_object_example.json). The content of data_object_example.json is as follows: { " ...

javascripthtmljsonangulartypescript

Arrange ten objects in each of the four JavaScript arrays in ascending order based on a specific value

model with sample data -> [{ date: '13413413', name: 'asdfasdf', other: 'kjh' }] The getJSON function returns 4 arrays, each containing 10 model objects. array1 = 10 resultsObj sorted by date from newest to o ...

javascriptsorting

Navigating properties and linking information in React

I'm currently tackling a project that requires me to pass data to two distinct functional components. While my axios call to the API appears to be functioning properly, along with setting the state using hooks, I am continuously encountering two pers ...

javascriptreactjsreact-hooks

Skipping certain key-value pairs during the conversion from JSON to Excel Worksheet using the XLSX library in JavaScript

I have a set of objects in JSON format within my JavaScript code and I am looking to transform this data into an Excel worksheet. Within the JSON structure, there are certain key-value pairs that I do not wish to include in the Excel output. For instance, ...

javascriptjsonexcelxlsxworksheet

Unable to locate the root element for mounting the component in Cypress with React

I am currently testing my react app, which was created using create-react-app, with the help of cypress. Unfortunately, I encountered an error that looks like this: https://i.stack.imgur.com/xlwbo.png The error seems to be related to trying to fetch an ...

javascriptreactjstestingwebpackcypress

Encountering issues with AngularJS ng-click and $http post functionality

ReactJS theApp.controller('MenuSideController', ['$scope', 'CategoryService', function ($scope, CategoryService){ CategoryService.getList() .success(function(list){ $scope.list = list; }); $scope.me ...

angularjs

Looking to show the contents of a Rails AJAX JSON response in your application? Having trouble with Javascript displaying [object HTMLDocument] instead? Let

I have been working on a Rails application where I implemented an AJAX / JSON controller to facilitate dynamic HTML updates within the view. For guidance, I referred to this helpful resource: When making a call like this: ../related.json?vendor_id=1&b ...

javascriptruby-on-railsajax

Implementing a template within a div tag in HTML using AngularJS

I'm working on an index page that has been divided into 4 divs. My goal is to load a template into one of these divs when a user clicks on a link in the navigation bar. For example, if the user clicks on "Ex1", I want the content of the template to sh ...

angularjs

How can I swap a string for a symbol in JavaScript?

Is there a way to convert the text @abc some text here to <a href="some_url">@abc</a> some text here using JavaScript? Are there any libraries that can help with this task? ...

javascriptreactjstypescriptvue.js

How to increment a date by 1 in an AngularJS function

I have a table with 5 cells in the header, each representing a different week (for example: Week 01, Week 02, and so on). In the first cell, the week is displayed like this: <div class="monthCells">Week {{vm.selectedPeriod}}</div> and it sho ...

angularjsmomentjs