Display a complex JSON string in an ng-grid

My web service is designed to generate a JSON string using the following code:

JavaScriptSerializer j = new JavaScriptSerializer();
return "[" + string.Join(",", v.getProbingJobs().Select(a => j.Serialize(a)).ToArray()) + "]";

(The getProbingJobs function utilizes entity framework to retrieve data from a stored procedure)

This particular Web Service is integrated with AngularJS ($http.get method). My goal is to showcase the JSON string within ng-grid in multiple columns. However, instead of displaying ng-grid as intended, it only shows one column where each row (cell) represents a character from the JSON string.

The structure of my JSON string looks like this:

"[{\"visualid\":\"35422064B1181\",\"operator\":\"ishashua\",\"Step\":\"Probe\",\"Equipment\":\"LTM3538\",\"Last_Step_Start_Time\":\"\\\/Date(1406725260000)\\\/\",\"Job_Name\":\"P0 minVcc (UNIT 35422064B1181 )\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Event\",\"Equipment\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Equipment\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Equipment\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00931\",\"operator\":\"kgitelmk\",\"Step\":\"Probing\",\"Equipment\":\"LVX503\",\"Last_Step_Start_Time\":\"\\\/Date(1406698980000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0931)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"}]"
javascriptangularjsweb-servicesng-grid

Answer №1

Upon careful consideration, it is evident that @Chandermanis' observation is correct. Additionally, there is the inclusion of the Last_Step_Start_Time field which consists of the DATE() function and remains unresolved.

To address this issue, one can utilize a CellTemplate within the ColumnDefs and implement a custom filter:

cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field) | resolve_date}}</div>'

Below is the filter implementation (which could certainly be refined further):

app.filter('resolve_date', function() {
  return function(text, length, end) {
    text = text.substring(6, 19);
    return Date(text);
  };
});

A helpful Plunker has been provided for reference.

Please consider upvoting @Chandermanis' comment as it essentially provides the correct solution.

Update:

In relation to the width/wrapping concern:

Addressing this matter can be somewhat intricate due to ng-grid not functioning as a traditional table but rather as multiple div elements presented in grid form.

Initially, adjust the rowHeight within the gridOptions to an appropriate value.

Subsequently, assign specific widths to each column to accommodate displaying the longest word entirely.

Lastly, customize the css for ngCellText by utilizing the following code snippet:

.ngCellText.ng-scope{
  white-space:normal;
}

An enhanced Plunker demonstrating these modifications is available.

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

Limiting the scope of a CSS style to only apply to a specific element and all of its child

Today, I am encountering an issue with restricting the application of CSS. The <div class="parent"> <div id="childWithNoCss"> <p>No css</p> </div> <div id="childWithCss"> <p>Apply css</p> </div> </ ...

cssangularjs

Configuring IP address binding for an Angular application running on an nginx server

I've managed to successfully host an angular website on nginx with the following configuration in my nginx.conf file: server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.acce ...

angularjsnginxip-address

The scale line on the OpenLayers map displays the same metrics twice, even when the zoom level is different

When using the Openlayers Map scale line in Metric units, a specific zoom rate may be repeated twice during the zoom event, even though the actual zoom-in resolution varies on the map. In the provided link, you can observe that the zoom rates of 5km and ...

javascripttypescriptzoomingopenlayers

Do I have to cram all the content onto a single page just to use a scroll effect?

I'm currently facing a dilemma as I work on building my portfolio. My goal is to primarily use html5 and css3, along with a bit of js, jquery, and other tools if necessary. Although I am not an expert in web development, I wanted to push myself to cre ...

javascripthtmlcssscroll

Utilize JSON text importing for template literals in Node.js

When it comes to my node js projects, I usually opt for using a text.json file and requiring it rather than hardcoding static text directly into my code. Here's an example: JSON file { "greet": "Hello world" } var text = require('./text.json ...

javascriptnode.js

Tips on accessing information from a JSON file

I am facing an issue while trying to extract data from a JSON object that was passed from the servlet. The keys in my JSON object are numbered, and I need to append these numbers to the names of the keys. The structure of my response is as follows: {"sha ...

javascriptjqueryjson

managing information through the elimination of nested keys with node js / javascript

let json=[ { metadata: { tags: [] }, sys: { space: { sys: [Object] }, id: '4gSSbjCFEorYXqrgDIP2FA', type: 'Entry', }, fields: { richTextEditor: { 'fn-US': [Object] }, short: { 'as-ds': &a ...

javascriptnode.jsjsonnodes

Making an asynchronous request from jQuery to a Slim Framework API endpoint

I'm currently working on incorporating Slim into my project and I'm facing some challenges with setting up the AJAX call correctly: $.ajax({ url: "/api/addresses/", type: 'POST', contentType: 'application/j ...

javascriptphpjqueryajaxslim

Tree Grid in jqGrid with Offline Data

Accessing the jqGrid documentation for tree grid, I discovered the following information: "At present, jqGrid can only interact with data that is returned from a server. However, there are some tips and resources available that explain how to work w ...

javascriptjqueryjqgrid

Executing a function with a click, then undoing it with a second click

My goal is to trigger an animation that involves text sliding off the screen only when the burger icon is clicked, rather than loading immediately upon refreshing the page. The desired behavior includes activating the function on the initial click and then ...

javascriptjqueryhtmlcss

How can I transfer data to a different component in Angular 11 that is not directly related?

Within the home component, there is a line that reads ...<app-root [message]="hii"> which opens the app-root component. The app-root component has an @input and {{message}} in the HTML is functioning properly. However, instead of opening t ...

javascriptangulartypescript

Ensure the item chosen is displayed on a single line, not two

I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection re ...

javascriptcssreactjsmaterial-uijss

What is the best way to update the value of a preact signal from a different component?

export const clicked = signal(false); const handleClickDay = (date) => { const day = date.getDate().toString().padStart(2,'0') const month = (date.getMonth()+1).toString().padStart(2,'0') const year = da ...

javascriptreactjssignalspreact

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

javascriptjsonwebunicodeattributes

How to Stop Browser Tooltip from Displaying HTML Tags within "innerHtml" in Angular 6

In my Angular application, a template is using the following code snippet: ... <span [innerHtml]="textVar"></span> ... The textVar variable is created to allow for special styling on certain characters or strings. It's formatted using th ...

javascripthtmlangulartypescript

Retrieve information from the selected row within a table by pressing the Enter key

I have a search box that dynamically populates a table. I am using arrow keys to navigate through the rows in the table. When I press the enter key, I want to retrieve the data from the selected row. For example, in the code snippet below, I am trying to ...

javascripthtmljquerycss

I recently developed a T3 stack project and am currently attempting to configure a next JS middleware, however, I am encountering issues with it not triggering as expected

Having issues with my T3 stack app where the next js middleware is not triggering. I've placed a middelware.ts file in the root directory. middleware.ts // middleware.ts import { NextResponse } from "next/server"; import type { NextRequest ...

javascriptnext.jsmiddleware

How to make the dropdown menu in Material UI Select have a horizontal scroll bar?

I've run into an issue in my project with the material ui Select component. The dropdown contents are too long and don't fit properly. To solve this problem, I tried adding a horizontal scroll to the dropdown menu by setting OverflowX property i ...

javascriptmaterial-ui

Sending handlebars variable to the client-side JavaScript file

I am currently working on an application using node.js along with express and handlebars, and I'm trying to find a way to transfer handlebars data from the server to client-side JavaScript files. Here is an example: //server.js var person = { na ...

javascriptnode.jshandlebars.js

Changing Underscores in ES6 Techniques

My current project is built using AngularJS, Redux, and Underscore. Within this project, I have the following code snippet: const selectedBroker = _.findWhere(state.brokers, { brokerId: action.payload }); return state.merge({ selectedBroker, sel ...

javascriptangularjsecmascript-6reduxunderscore.js