Tips on integrating Angular's ui-grid with an array of strings

I have utilized Angular ui-grid to display an array of json objects received in the response. However, my current scenario involves getting an array of string values instead. How should I configure the grid for this situation?

$http.get(url)
.success(function(data) {
  if(data.length <= 0 && data != undefined) {
    $scope.noDataGridEpr="Data is not Available";
    console.log("Data is not Available");
  }
  console.log("Data is" + data);
  $scope.prList = data; 
  console.log("prList is" + $scope.prList); //an array of strings
  $scope.dataLoadedEpr=true;
  return true;
})
.error(function(data, status) {
  console.log("Error from controller. Could not query.");
  return false;
})

This displays

prList is[A/DN,B/LCK,10,10,same,match,match],
[B/DN,D/LCK,10,10,same,mismatch,match],
[G/DN,D/LCK,10,10,same,mismatch,mismatch]

Below is my current grid setup

$scope.prGrid = { 
data: 'prList',
columnDefs: [
{field: 'DPin', displayName: 'DPin', width: "5%"},
{field: 'CPin', displayName: 'CPin', width: "5%"},
{field: 'slack1', displayName: 'slack1', width: "5%"},
{field: 'slack2', displayName: 'slack2', width: "5%"},
{field: 'cComp', displayName: 'cComp', width: "10%"},
{field: 'dComp', displayName: 'dComp', width: "5%"},
{field: 'gComp', displayName: 'dComp', width: "5%"}
 enableFiltering: true,
  multiSelect: false,
  enableGridMenu: true,
  enableRowHeaderSelection: false, 
  enableSorting: true,
  enableColumnResizing: true
};

I acknowledge that the field configuration above is incorrect. Since I am dealing with an array of strings as input, can someone provide guidance on how to assign each string in the array to a row in the grid?

Thank you.

Answer №1

Click here to learn more about binding to a 2D array

For an example, see this Plunker.

app.controller('TwoDimensionCtrl', ['$scope','$timeout','uiGridConstants', function ($scope,$timeout,uiGridConstants) {
  $scope.data=[
              ["Cox", "Carney", "Enormo", true],
              ["Lorraine", "Carney", "Comveyer", false],
              ["Nancy", "Waters", "Fuelton", false]
            ];

  $scope.gridOptions = {
          enableSorting: true,
          columnDefs: [
            { name: "firstName", field: "0" },
            { name: "lastName", field: "1" },
            { name: "company", field: "2" },
            { name: "employed", field: "3" }
          ],
          data : $scope.data
        };
  $timeout(function () {
    $scope.data[0][0]="TestMod";
  },5000);

}]);

Answer №2

Referenced this guide for displaying an array of strings in ui-grid: Displaying array of strings in single column per row in ui-grid

Implemented the following code to convert and set the JSON object consumed by ui-grid successfully.

$scope.prList = convertArrayOfStringsToGridFriendlyJSON(data);

function convertArrayOfStringsToGridFriendlyJSON(arr) {
var out = [];
arr.forEach(function(entry){
entry = entry.replace('[' , '')
entry = entry.replace(']' , '')
entry = entry.split(',')

var obj = {}; //json object        
var DPin= "DPin"; //keys
var CPin= "CPin"; 
obj[DPin] = entry[0];
obj[CPin] = entry[1];
out.push(obj);
});
return out;
};

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

navigate back to the previous tab using protractor

When I open a new tab (second), I attempt to switch back to the first tab. common.clickOpenNewSession(); //opens a new tab browser.getAllWindowHandles().then(function (handles) { var secondWindowHandle = handles[1]; var firstWindowHandle ...

Activate the JavaScript loader while data is being fetched

I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want ...

AngularJS allows for the passing of a function value into another function

Is there a way for me to pass a value from one function to another? Here is an example of what I am trying to achieve: HTML <div> <li ng-repeat="language in languages" ng-click="myFirstFunction(firstValue) {{lang ...

Implementing Material-UI Autocomplete: How to Include a Starting Value for the startAdornment

I am using autocomplete with multiple selection permission. https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js In the provided example, there are 3 options for cities. How can I manually insert a value in TextField that is automatically selected ...

Is there a way to automatically insert page numbers into every internal link on an HTML page?

When in print mode, I want to display links like this: <a href="#targetPage">link</a> but I'd prefer them to appear as: <a href="#targetPage">link (page 11)</a> (assuming the target page is on page 11 in the print preview). ...

Issue with rendering in sandbox environment versus localhost

Here's a dilemma I'm facing - I have some HTML code on my localhost that looks like this: <div> <p>Go to: <a href="www.foobar.com">here</a></p> </div> On localhost, the output is "Go to: here" with 'he ...

Ways to stop Bootstrap collapse from displaying depending on a certain condition in bs5 framework

I've been struggling to figure out how to prevent a collapsible panel from opening or showing if a specific value is null. Despite multiple attempts, I haven't had any success. HTML <a href="#" data-bs-toggle="collapse" da ...

I am looking to insert an array of a specific type into a Postgres database using Node.js, but I am unsure of the process

query.callfunction('fn_create_mp_product', parameters, (err, result) => { if (err) { console.log(err) callback(err); } else { if (result.status == 'success') { callb ...

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

I have encountered a challenging situation where I am using JavaScript to render data from a data.json file into HTML. Everything seems to be functioning correctly, as the JSON data is being successfully rendered into HTML using a loop, resulting in multip ...

Please be advised that the message is currently in the process of being typed

In my current setup, I am utilizing Laravel 5.6.7, Socket.IO, and vue.js while excluding Pusher and Redis. The following is the code snippet I am using to send messages directly to a user engaged in one-on-one chatting with me. var url = "http://localhost ...

Setting up lint-staged for Vue projects: A step-by-step guide

After setting up a new Vue3 app using the Vue CLI and configuring Prettier as my linter, I decided to implement commitlint, husky, and lint-staged for validating commit messages and linting the code before pushing it. My Approach Following the instructio ...

Guide on configuring remix using aws cdk

Currently, I am delving into the world of remix and attempting to configure a remix project that utilizes AWS CDK for the server. I stumbled upon this GitHub example: https://github.com/ajhaining/remix-cloudfront-cdk-example However, it lacks clarity on ...

jQuery toggle function not working properly on first click

Why does my first click not work, but the second one does? This is the code snippet: $(function () { $("#clickme").toggle(function () { $(this).parent().animate({left:'0px'}, {queue: false, duration: 500}); }, function () { ...

The app's connection issue persists as the SDK initialization has exceeded the time limit

We are currently facing an issue when trying to publish a new manifest for our app in the store. The Microsoft team in India is encountering an error message that says "There is a problem reaching the app" during validation. It's worth noting that th ...

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

Utilizing ng-repeat to fetch and display an array of objects stored in Firebase

I am currently facing an issue while trying to access a list of notes from Firebase using AngularJS. I am unable to display the retrieved data even though there are no error messages appearing in the console. Notes.controller('ListGroupCtrl', ...

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...

Ways to manage an element that has been loaded using the load query function

After implementing the query load function to update posts on the homepage, I was able to display the most up-to-date posts. However, a new issue arose: Whenever I updated all posts without refreshing the entire page, I needed a way to control the element ...

express middleware is not compatible with prototype functions

I've encountered a perplexing issue while working with the node.js express framework. Let's say I have a file called test.js containing the following code: function a(){ } a.prototype.b = function(){ this.c("asdsad"); } a.prototype.c = f ...

What are the steps to validate an Ajax form using Dojo JavaScript?

Currently, I am in the process of validating a form that has been written in Javascript/Dojo before sending it via Ajax. Here is the code snippet: <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript" djConf ...