Json – Sibeesh Passion

Style Or Format JSON Data In JQuery

SibeeshVenu — Tue, 31 May 2016 00:00:34 +0000

In this post we will discuss how we can format or style the JSON you get from the server. Sometimes you may need to show the exact JSON you get from your API or from server in your web page. Normally if you just bind this JSON to any pre tag, it will look like just a straight line. Isn’t it? To overcome this we have an option in jQuery . I hope you will like this.

Background

For the past few months I am working with some Web API projects. As you all know the preferred output of an API is JSON, I am returning JSON from my API. I wanted to show this JSON in a Pre tag as a result, but in a formatted way or stylish way. Here I am going to explain how we can do this.

Using the code

Before getting started, please make sure that you have added the jQuery reference to your page.

[html]

[/html]

Now let us say we are getting a JSON as follows from our API.

[js]
[{"AreaCode":"B697-31","Revenue":12747128.190000001},{"AreaCode":"B697-92","Revenue":7922559.1600000048},{"AreaCode":"B697-76","Revenue":7541039.540000001},{"AreaCode":"B697-46","Revenue":7076495.5800000066},{"AreaCode":"B553-131","Revenue":5738816.5099999979},{"AreaCode":"B553-193","Revenue":4608556.52},{"AreaCode":"B697-74","Revenue":3895194.1099999994},{"AreaCode":"D158-233","Revenue":3572808.989999996},{"AreaCode":"B697-78","Revenue":3512657.6999999937},{"AreaCode":"B672-31","Revenue":2955916.9800000032},{"AreaCode":"B553-46","Revenue":2806813.7100000042}]
[/js]

It will obviously looks like preceding when you just append it to a pre tag.

JSON in Pre Tag

Now we will format this JSON string with JQuery Parse and JQuery stringify method as follows.

[js]
var tmpData = JSON.parse(data);
var formattedData = JSON.stringify(tmpData, null, ‘\t’);
$(‘#output’).text(formattedData);
[/js]

Here output is the id of our pre tag which we defined as follows.

[html]

[/html]

Now if you bind the data after the formatting to pre tag, you will get an out put as follows.

JSON in Pre Tag Output

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Bind Json Data to JQWidget JQX Grid

SibeeshVenu — Thu, 18 Jun 2015 09:12:56 +0000

Introduction

Hi All, How are you today? Today we will learn how we can bind a Json data to JQWidget, JQX Grid. I hope you will like it.

Downloads

Download the source files here: BindJSONToGrid.rar

Background

If you are new to JQWidget JQX Grid, Please find out here: http://sibeeshpassion.com/category/jqwidgets/

Using the code

Here I am using Visual Studio 2012. We will have a txt file in which we will have the JSON data, you can use this file or you can manually load Json data from server side.

So let us start

First of all we must include the needed files for the grid.

[html]

[/html]

No we can start the grid implementation. For that create a ready function and add the codes as follows.
[js]

[/js]

Now what else we need? Yes, we need to create a div where we can render our grid.

[html]

Bind Json Data to JQwidgets JQX grid – Sibeesh Passion

[/html]

What about our data? We have not seen our data right?

All set now. So shall we see the grid now?

Output

Things to remember

Make sure that your data type is json in source object.

[js]
datatype: "json"
[/js]

Make sure your json is valid

Conclusion

I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!

Kindest Regards
Sibeesh Venu

Sort a JSON Array Programmatically by a Property

SibeeshVenu — Wed, 10 Jun 2015 00:00:47 +0000

Introduction

Hi all, I hope you all are fine. Today we will learn how to sort a JSON object by its property. We will be using normal jQuery features to do this. I hope you will like it.

Background

Yesterday I got a situation where I needed to sort my JSON object that I am creating using server data. So I though of sharing that with you all.

Using the code

First of all we will add a jQuery reference as in the following:
[js]

[/js]

Now we need some, data right? Please have a look at the following JSON data.

Next we need some UI elements. Am I right?
[html]

[/html]

What next? We need to show this data to our UI, right? For that I am calling a function in our document ready function.
[js]
var jsonObject;
$(function () {
$(‘#sorted’).hide();
loadUnsorted();
$(‘#makemesort’).click(function () {
loadSorted();
$(‘#makemesort’).hide();
$(‘#sorted’).show();
});
});
[/js]

The following is the function definition for the loadUnsorted() function.
[js]
function loadUnsorted() {
jsonObject = $.parseJSON(data);
var html = ‘

’;
for (i = 0; i < jsonObject.length; i++) {
html += ‘’;
}
html += ‘

Year	X Value	Y Value
’ + jsonObject[i].name + ‘	’ + jsonObject[i].data[0].x + ‘	’ + jsonObject[i].data[0].y + ‘

’;
$(‘#unsorted’).append(html);
}
[/js]

What we are doing here is parsing our data and appending the data to our UI element using a for loop.

Now if you run it, you will get output as follows.

Now we have successfully formatted our data and shown it to our UI. Cool, right?
So shall we go and sort our data? I guess you said “Yes”. Awesome.
Now we will create a click event for our “Make me sort” button as in the following:
[js]
$(‘#makemesort’).click(function () {
loadSorted();
$(‘#makemesort’).hide();
$(‘#sorted’).show();
});
[/js]

So here is the definition for the loadSorted() function.
[js]
function loadSorted() {
jsonObject.sort(SortMe);
var html = ‘

’;
for (i = 0; i < jsonObject.length; i++) {
html += ‘’;
}
html += ‘

Year	X Value	Y Value
’ + jsonObject[i].name + ‘	’ + jsonObject[i].data[0].x + ‘	’ + jsonObject[i].data[0].y + ‘

’;
$(‘#sorted’).append(html);
}
[/js]

Now I guess you could determine the difference of both the loadSorted() and loadUnsorted() functions. Yeah, you are right. I am calling a sort function “sortMe” there.
[js]
function SortMe(a, b) {
if (b.name != null && b.name != undefined && a.name != null && a.name != undefined) {
var First = a.name.toString().toLowerCase();
var Second = b.name.toString().toLowerCase();
return ((First < Second) ? -1 : ((First > Second) ? 1 : 0));
}
}
[/js]

What our “sortMe” function does is, it will take two objects at a time and compare those by the property “name” of each object.

[js]
(First < Second) ? -1 : ((First > Second) ? 1 : 0)
[/js]

Now shall we look into the complete code? We have done everything folks.

Complete Code

[html]

Sort JSON Object by its property and show demo – Sibeesh Passion

[/html]

So now it is time to see our output. I am eager to see it.

You can find we have sorted our object and shown it in a separate table. Cool.
That is all for the day. I will return with another article soon.

Conclusion

I hope you liked this article. Please share me your valuable thoughts and comments. Your feedbacks are always welcome. Thanks in advance. Happy coding!.

Kindest Regards.
Sibeesh Venu

Find JSON Objects With Same Property and Separate Them

SibeeshVenu — Fri, 29 May 2015 20:53:03 +0000

Introduction

Today, this article explains how to find the objects with the same property from a JSON and separate them to be shown in the UI. I hope you will like it.

Background

Yesterday I came across a situation where there was a need to find the objects with the same property from some JSON data and separate them. So I thought of sharing that with you all.

Using the code

First of all we will add a jQuery reference as in the following code snippet:

[js]

[/js]

Now we need some data, right? Please have a look at the following JSON data.

[js]
var data = ‘[{“name”:2014,”data”:[{“x”:”1″,”y”:222808746.81}]},{“name”:2013,”data”:[{“x”:”2″,”y”:289647045.18}]},{“name”:2014,”data”:[{“x”:”2″,”y”:285136890.07}]},{“name”:2013,”data”:[{“x”:”3″,”y”:370853178.74}]},{“name”:2014,”data”:[{“x”:”3″,”y”:403272964.28}]},{“name”:2012,”data”:[{“x”:”4″,”y”:217294031.36}]},{“name”:2013,”data”:[{“x”:”4″,”y”:224715039.94}]},{“name”:2014,”data”:[{“x”:”4″,”y”:249034460.23}]},{“name”:2012,”data”:[{“x”:”5″,”y”:215978054.15}]},{“name”:2013,”data”:[{“x”:”5″,”y”:241211810.92}]},{“name”:2014,”data”:[{“x”:”5″,”y”:245950715.8}]},{“name”:2012,”data”:[{“x”:”6″,”y”:262898180.85}]},{“name”:2013,”data”:[{“x”:”6″,”y”:280550623.51}]},{“name”:2014,”data”:[{“x”:”6″,”y”:295780079.03}]},{“name”:2012,”data”:[{“x”:”7″,”y”:217310275.85}]},{“name”:2013,”data”:[{“x”:”7″,”y”:230973675.47}]},{“name”:2014,”data”:[{“x”:”7″,”y”:238227382.03}]}]’;
[/js]

Next we need some UI elements as in the following:

[html]

[/html]

What next? We need to show this data to our UI, right? For that I am calling a function in our document ready function.

[js]
$(function () {
$(‘#newData’).hide();
loadinitialData();
});
[/js]

The following is the function definition for the loadinitialData() function.

[js]
function loadinitialData() {
jsonObject = $.parseJSON(data);
var html = ‘

’;
for (i = 0; i < jsonObject.length; i++) {
html += ‘’;
}
html += ‘

Year	X Value	Y Value
’ + jsonObject[i].name + ‘	’ + jsonObject[i].data[0].x + ‘	’ + jsonObject[i].data[0].y + ‘

’;
$(‘#initialData’).append(html);
}
[/js]

What we are doing here is parsing our data and appending the data to our UI element using a for loop.

Now after running it, you will get the following output.

We have successfully formatted our data and shown it to our UI. Cool, right?

So shall we go and separate our data? I guess you said “Yes”. Awesome. Now we will create a click event for our “Make me sort” button as in the following:

[js]
$(‘#separateme’).click(function () {
loadnewData();
$(‘#separateme’).hide();
$(‘#newData’).show();
});
[/js]

Here is the definition of the loadnewData() function.

[js]
function loadnewData() {
for (i = 0; i < uniqueNames.length; i++) {
var currentName = uniqueNames[i];
var uniqueDataArray = $.grep(jsonObject, function (data) {
return data.name == currentName;
});
var html = ‘

’;
for (j = 0; j < uniqueDataArray.length; j++) {
html += ‘’;
}
html += ‘

Year	X Value	Y Value
’ + uniqueDataArray[j].name + ‘	’ + uniqueDataArray[j].data[0].x + ‘	’ + uniqueDataArray[j].data[0].y + ‘

’;
$(‘#newData’).append(html);
}
}
[/js]

Now I guess you could determine the difference of both the loadinitialData() and loadnewData() functions. Yeah, you are right, we are using a function “grep” there.

[js]
var uniqueDataArray = $.grep(jsonObject, function (data) {
return data.name == currentName;
});
[/js]
What our “grep” function does is, it will take all objects at a time that has the property “name” as currentName.
[js]
return data.name == currentName;
[/js]

Once that is done, we will create a separate HTML table for each property and bind it to our parent element. Shall we now look into the complete code? We have done everything.

Complete Code

[html]

Find JSON Object by its property,separate and show demo – Sibeesh Passion

[/html]
Now it is time to see our output as in the following.

output

You can find we have separated our object and shown it in a separate table. Cool. That is all for the day. I will return with another article soon.

Conclusion

I hope you liked this article. Please share with me your valuable thoughts and comments. Your feedback is always welcomed.
Thanks in advance. Happy coding!

Convert Microsoft ADOMD Cell Set to JSON

SibeeshVenu — Sun, 29 Mar 2015 20:08:15 +0000

In this article we will learn how we can convert Microsoft ADOMD cell sets to JSON. There are few possible ways to convert a CellSet to JSON, Here by I am sharing you one among that options. We will create a function which accepts cellset as the argument and we will loop through the axes of cellset and bind the values according to a string builder using a JsonWriter class. I hope you will like it.

Background

For the past few months I have been working with Microsoft ADOMD data sources. And I have written some article also that will describe the problems I have encountered so far. If you are new to ADOMD I strongly recommend that read my previous articles that you may find useful when you work with ADOMD data sources. You can find those article links here.

How to Convert Microsoft ADOMD Data Source to JSON

Convert CellSet to HTML Table and From HTML to JSON and to Array

Why

You might think, why am I again using the methods described in the preceding two articles. I will answer that. I have encountered some issues with those methods. When you use a data adapter or data reader as explained in the first link (How to Convert Microsoft ADOMD Data Source to JSON) you always get the values as normal values instead of formatted values. For example even if the value contains $ or %, you will always get values without those symbols. So your application won’t let the user identify which one is currency or which one is %. In my case it was high chart and high maps. When the user hovers over a specific area, I need to show the measure values in the tooltip.

So in that case I was forced to use the cell set again, where there is an option that we can select the formatted value. I will show you that in my function.

Using the code

The following is the function that does what was explained above.
[csharp]
private string BuildBubbleMap(CellSet cst)
{
try
{
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
string columnName = string.Empty;
string fieldVal = string.Empty;
//check if any axes were returned else throw error.
int axes_count = cst.Axes.Count;
if (axes_count == 0)
throw new Exception("No data returned for the selection");

//if axes count is not 2
if (axes_count != 2)
throw new Exception("The code support only queries with two axes");

//if no position on either row or column throw error
if (!(cst.Axes[0].Positions.Count > 0) && !(cst.Axes[1].Positions.Count > 0))
throw new Exception("No data returned for the selection");

int cur_row, cur_col, col_count, row_count, col_dim_count, row_dim_count;
row_dim_count = 0;

//Number of dimensions on the column
col_dim_count = cst.Axes[0].Positions[0].Members.Count;

//Number of dimensions on the row
if (cst.Axes[1].Positions.Count > 0)
{
if (cst.Axes[1].Positions[0].Members.Count > 0)
row_dim_count = cst.Axes[1].Positions[0].Members.Count;
}
//Total rows and columns
row_count = cst.Axes[1].Positions.Count + col_dim_count; //number of rows + rows for column headers
col_count = cst.Axes[0].Positions.Count + row_dim_count; //number of columns + columns for row headers

using (JsonWriter myJson = new JsonTextWriter(sw))
{
myJson.WriteStartArray();
for (cur_row = 0; cur_row < row_count-1; cur_row++)
{
myJson.WriteStartObject();
for (cur_col = 0; cur_col < col_count-1; cur_col++)
{
//Looping for dimension headers
columnName = cst.Axes[1].Positions[cur_row].Members[cur_col].ParentLevel.ToString().Replace("{", "").Replace("}", "").Trim();
fieldVal = cst.Axes[1].Positions[cur_row].Members[cur_col].Caption.Replace(",", " ");
//If the value is null, I dont need that to be included
if ((columnName == null || columnName == "" || columnName.ToLower() == "undefined" || columnName.ToLower() == "null" ||
columnName.ToLower() == "(null)" || columnName.ToLower() == "unknown")||(fieldVal == null || fieldVal == "" ||
fieldVal.ToLower() == "undefined" || fieldVal.ToLower() == "null" ||
fieldVal.ToLower() == "(null)" || fieldVal.ToLower() == "unknown"))
break;
//Map expect the header as lat and lon, so here we are changing that.
if (columnName.ToLower() == "latitude")
columnName = "lat";
else if (columnName.ToLower() == "longitude")
columnName = "lon";

myJson.WritePropertyName(columnName);
myJson.WriteValue(fieldVal);
}
//Looping for measure headers
myJson.WritePropertyName(cst.Axes[0].Positions[0].Members[0].Caption.Replace(",", " ").Trim());
myJson.WriteValue(cst[cur_row].FormattedValue);
//Please be noted that we are using FormattedValue here.
myJson.WriteEndObject();
}
myJson.WriteEndArray();
}
cst = null;
return sw.ToString();
}
catch (Exception)
{
cst = null;
throw;
}
}
[/csharp]

You can see that this function expects the parameter cell set. Here we are finding the axis (Axis0 and Axis 1). According to my ADOMD query my dimensions are in Axis 1, so that I need to determine the caption for each dimension from the cell set. Once I determine the dimensions I am writing that to the StringBuilder using the method WritePropertyName() of the JSON Writer class. To use this class you must include the Newtonsoft DLL as in the following.
[csharp]
using Newtonsoft.Json;
[/csharp]

Once that is over, I am writing the value for those dimensions using the WriteValue() method of the JSON writer class.

I am doing that for the measures also. You can see these implementations in my code. Finally I am creating the proper JSON here and returning that.

To use this function you need to build the cell set first. You can do that as follows.
[csharp]
using (AdomdConnection conn = new AdomdConnection(myConnection))
{
conn.Open();
using (AdomdCommand cmd = new AdomdCommand(query, conn))
{
cmd.CommandTimeout = connectionTimeout;
cst = cmd.ExecuteCellSet();
}
}
[/csharp]

Once you get the cell set, just pass the cell set to the preceding function, it will return the JSON you need. You can easily bind it to any client-side tool (for example, High Chart and High Maps).

Conclusion

Have you ever gone through this kind of requirement. Did I miss anything that you may think which is needed?. I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C-Sharp Corner, Stack Overflow, Asp.Net Forums or Code Project instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I am able to.

Kindest Regards
Sibeesh Venu

How to Convert Microsoft ADOMD Data Source to JSON

SibeeshVenu — Thu, 29 Jan 2015 20:04:54 +0000

Introduction

Hi all, I hope you are all fine. This article helps you to understand how to convert your ADOMD data source into the JavaScript Object Notation (JSON) format. If you are new to ADOMD, please read here.

As I said, we will convert the source to JSON, so you must understand what JSON is and its importance. Am I right?

Important of JSON

JSON stands for JavaScript Object Notation (basically JSON itself is JavaScript). It is a data format that we can format and analyze using JavaScript. It is easy to use. You can get more here.

Background

For the past few months I am working on ADOMD data sources. When you have become experienced in SQL, you may encounter some difficulties to play with sources. As far as my experience is concerned, playing with the data is not as easy as in SQL in ADOMD. The ADOMD data source may be an Excel file. In my case what exactly the client is doing was uploading the Excel files that they have created, to the DB.

Getting back to the point, when you have a client-side grid that accepts data in only JSON format in your ADOMD application, what will you do? I have searched for a solution to convert the source to the JSON for many days. But I could not find a solution. So I came up with the idea of converting the ADOMD data source (Cell Set) to a HTML table and in the client-side convert that to JSON. You can read that article here.

Now that was in the initial stage, where I was new to ADOMD. We developers never stop Googling, right? To be frank I am passionate about R&D work (in which we may need to search more and more). Now I have discovered some more methods to convert the source to JSON. I thought to share that information, so that someone may determine it is useful.

I am working in MVC, and I am using the below namespace for the process.

using Newtonsoft.Json;

The Process

In this I am not taking the ADOMD data source as a Cell Set that is popularly used in such applications. Here I will explain two methods or ways to do the process.

Using the ADOMD data adapter

Using the ADOMD data reader

In the first part we will use an adapter and fill the data into the data table and convert that to the JSON in the server-side itself. The problem in this method is, it needs many loops for formatting and creating.

In the second part we will use a data reader, while the object reads we will do the formatting and creating the JSON that needs only one loop. Sounds cool, right?

Using the code

Let us explain the first method.

Using the ADOMD data adapter

When you use an adapter and fill in the data table, the problem here you encounter is, the data table column name would be different and it will contain the hierarchy of the cube cells.

For example: The data table header contains “.[MEMBER_CAPTION]”

So here I am just determining the actual header name from all the header columns. I am using a loop for that.

Please note that it is completely based on my requirements. You may want to do a different process of formatting.

To format I am using the following function.

[csharp]
public DataTable HiMapColumnExcuteQuery(string query, string adoMDConnection)
{
string readerString = string.Empty;
try
{
using (AdomdConnection conn = new AdomdConnection(adoMDConnection))
{
conn.Open();
using (AdomdCommand cmd = new AdomdCommand(query, conn))
{
DataTable dt = new DataTable();
AdomdDataAdapter da = new AdomdDataAdapter(cmd);
da.Fill(dt);
List curColumn = new List();
string col = string.Empty;
if (dt.Rows.Count > 0 && dt.Columns.Count > 0)
{
for (int i = 0; i < dt.Columns.Count; i++)
{
string columnName = dt.Columns[i].ColumnName.Replace(“.[MEMBER_CAPTION]”, “”).Trim();
curColumn = columnName.Split(new string[] { “.” }, StringSplitOptions.None).ToList();
col = curColumn[curColumn.Count – 1].Replace(“[“, “”).Replace(“]”, “”);
if (Convert.ToString(col.Trim()).ToLower() == “latitude”)
col = “lat”;
if (Convert.ToString(col.Trim()).ToLower() == “longitude”)
col = “lon”;
dt.Columns[i].ColumnName = col;
}
dt.AcceptChanges();
}
return dt;
}
}
}
catch (Exception)
{
throw;
}
finally
{
}
}
[/csharp]

The function expects two parameters, one is the query that you need to execute and other is the connection. Here I am using this source for the Hi maps, as you all know it is important to provide the lat and lon for loading the map. So I am doing such formatting here.

Once the formatting is done, I can convert the data to the JSON foramt. For that I am using another function. You can see the function below.

[csharp]
public string GetJsonWithZeroForNull(DataTable dt)
{
try
{
if (dt == null)
{
throw new ArgumentNullException(“dt”);
}
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
serializer.MaxJsonLength = int.MaxValue;
List> rows =
new List>();
Dictionary row = null;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary();
foreach (DataColumn col in dt.Columns)
{
if (dr[col] == null || Convert.ToString(dr[col]).ToLower() == “undefined” || Convert.ToString(dr[col]).ToLower() == “unknown”)
continue;
else
row.Add(col.ColumnName.Trim(), dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
catch (Exception)
{
throw;
}
}
[/csharp]

Here I am omitting the data that all are not valid. At the end it will just serialize our rows and return the data in the format of JSON.

You can determine that if the data is greater then looping through the data twice may impact the performance.

And also we all know that a data reader is much better than a data adapter. If you do not understand why, please read here.

Using the ADOMD data reader

Now we will move to the next part. Please see the following function for doing that.

[csharp]
public string createJsonFromDataReader(string query, string adoMDConnection)
{
string readerString = string.Empty;
try
{
List curColumn = new List();
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
string columnName = string.Empty;
string fieldVal = string.Empty;
string prevFieldVal = string.Empty;
AdomdDataReader rdr;
using (AdomdConnection conn = new AdomdConnection(adoMDConnection))
{
conn.Open();
using (AdomdCommand cmd = new AdomdCommand(query, conn))
{
//cmd.Properties.Add(“ReturnCellProperties”, true);
rdr = cmd.ExecuteReader();
if (rdr != null)
{
using (JsonWriter myJson = new JsonTextWriter(sw))
{
myJson.WriteStartArray();
while (rdr.Read())
{
myJson.WriteStartObject();
int fields = rdr.FieldCount;
for (int i = 0; i < fields; i++)
{
if (rdr[i] != null )
{
fieldVal = rdr[i].ToString();
if (i != 0 && rdr[i-1] != null)
prevFieldVal = rdr[i – 1].ToString();
else
prevFieldVal = “First”;
if ((fieldVal == null || fieldVal.ToLower().Trim() == “undefined” || fieldVal.ToLower().Trim() == “unknown”)
&& (prevFieldVal == null || prevFieldVal.ToLower().Trim() == “undefined” || prevFieldVal.ToLower().Trim() == “unknown”))
{
continue;
}
else
{
columnName = rdr.GetName(i).Replace(“.[MEMBER_CAPTION]”, “”).Trim();
curColumn = columnName.Split(new string[] { “.” }, StringSplitOptions.None).ToList();
columnName = curColumn[curColumn.Count – 1].Replace(“[“, “”).Replace(“]”, “”);
if (Convert.ToString(columnName.Trim()).ToLower() == “latitude”)
columnName = “lat”;
if (Convert.ToString(columnName.Trim()).ToLower() == “longitude”)
columnName = “lon”;
myJson.WritePropertyName(columnName);
myJson.WriteValue(rdr[i]);
}
}
}
myJson.WriteEndObject();
}
myJson.WriteEndArray();
}
}
else
{
return “No Records to display”;
}
}
}
return sw.ToString();
}
catch (Exception)
{
throw;
}
finally
{
}
}
[/csharp]

Please understand that I have created an object (myJson) for the class JsonWriter. Our complete process is based on this object. Again the complete logic and formatting conditions are based on my requirements.

Here we are using built-in functions of the JsonWriter class. Let us list them.

WriteStartArray()

WritePropertyName()

WriteValue()

WriteEndObject()

WriteEndArray()

You can see that I am doing both the formatting and creating of the JSON with one loop that will improve the performance.
In the process we are appending the values to the string builder and finally the function will return the JSON in the required format.

You have done it. Great.

Please use StringBuilder in your applications instead of string. Use a string variable only if it is necessary. Using string variables will create separate memory allocations whenever you assign values to it. Please read more here.

String builder vs string concatenation

Difference between string and StringBuilder in C#

Note: I have implemented this for loading high maps. That’s why I have formatted it in this way. Please use your own formatting depending on your requirements.

Point of interest

ADOMD, ADOMD data source to JSON, ADOMD Cell Set to JSON, ADOMD data adapter to JSON, ADOMD data reader to JSON.

Conclusion

Please do not forget to give your valuable suggestions.

That is all for the day, will see you in another article.

Kindest Regards
Sibeesh Venu

Convert CellSet to HTML Table and From HTML to JSON and to Array

SibeeshVenu — Wed, 29 Oct 2014 19:19:46 +0000

Introduction

For the past few days I have been working on ADOMD and MDX. I encountered a situation where I need to convert my Cell Set to a HTML table and render it to the client-side Grid. So I thought of sharing that with you all.

This article has been selected as article of the day Monday, November 10, 2014 in http://www.asp.net/community/articles (Convert CellSet to HTML Table, and from HTML to Json, Array)

Background

If you are new to ADOMD, you can refer to the following links:

Microsoft Analysis Services 2005: Displaying a grid using ADOMD.NET and MDX
Manipulate and Query OLAP Data Using ADOMD and Multidimensional Expressions

Why

As I have already said, in my current project we are using MDX cubes, so in the server-side we will get only a CellSet. So I have tried very much to convert the CellSet to the JSON for this JQX grid alone (all other Grids in the project use a HTML table as the data source). But I couldn’t find any good way for that. So I thought of getting the HTML table from the CellSet as in the other grid at the server side. And I knew how to formulate the Array and JSON from an HTML table. Here I am sharing that information.

Please provide your valuable suggestions for improvement.

Using the Code

We modify the code as per our needs from the preceding specified articles and bind to an HtmlTextWriter. We have created a function called renderHTML() that will accept CellSet as an argument. Here, I will show the code.
[csharp]
try
{
System.Text.StringBuilder result = new System.Text.StringBuilder();
//check if any axes were returned else throw error.
int axes_count = cst.Axes.Count;
if (axes_count == 0)
throw new Exception(“No data returned for the selection”);
//if axes count is not 2
if (axes_count != 2)
throw new Exception(“The sample code support only queries with two axes”);
//if no position on either row or column throw error
if (!(cst.Axes[0].Positions.Count > 0) && !(cst.Axes[1].Positions.Count > 0))
throw new Exception(“No data returned for the selection”);
int cur_row, cur_col, col_count, row_count, col_dim_count, row_dim_count;
cur_row = cur_col = col_count = row_count = col_dim_count = row_dim_count = 0;
//Number of dimensions on the column
col_dim_count = cst.Axes[0].Positions[0].Members.Count;
//Number of dimensions on the row
if (cst.Axes[1].Positions[0].Members.Count > 0)
row_dim_count = cst.Axes[1].Positions[0].Members.Count;
//Total rows and columns
row_count = cst.Axes[1].Positions.Count +
col_dim_count; //number of rows + rows for column headers
col_count = cst.Axes[0].Positions.Count +
row_dim_count; //number of columns + columns for row headers
//gridPanel.ClientIDMode = System.Web.UI.ClientIDMode.AutoID;
//////lets clear any controls under the grid panel
//gridPanel.Controls.Clear();
////Add new server side table control to gridPanel
Table tblgrid = new Table();
tblgrid.Attributes.Add(“Id”, “myhtmltab”);
tblgrid.Attributes.Add(“class”, “display”);
//We will use label control to add text to the table cell
Label lbl;
string previousText = “”;
int colSpan = 1;
for (cur_row = 0; cur_row < row_count; cur_row++)
{
//add new row to table
TableRow tr = new TableRow();
for (cur_col = 0; cur_col < col_count; cur_col++)
{
//create new cell and instance of label
TableCell td = new TableCell();
TableHeaderCell th = new TableHeaderCell();
lbl = new Label();
//check if we are writing to a ROW having column header
if (cur_row < col_dim_count)
{
//check if we are writing to a cell having row header
if (cur_col < row_dim_count)
{
//this should be empty cell — it’s on top left of the grid.
//result.Append(” ,”);
lbl.Text = ” “;
td.CssClass = “titleAllLockedCell”; //this locks
//the cell so it doesn’t scroll upwards nor leftwards
}
else
{
//this is a column header cell — use member caption for header
//result.Append(cst.Axes[0].Positions[cur_col –
// row_dim_count].Members[cur_row].Caption + “,”);
//if (cur_row < 1)
//{
lbl.Text = cst.Axes[0].Positions[cur_col – row_dim_count].Members[cur_row].Caption;
th.CssClass = “titleTopLockedCell”; // this lockeders
//the cell so it doesn’t scroll upwards
//}
if (lbl.Text == previousText)
{
colSpan++;
}
else
{
colSpan = 1;
}
}
}
else
{
//We are here.. so we are writing a row having data (not column headers)
//check if we are writing to a cell having row header
if (cur_col < row_dim_count)
{
//this is a row header cell — use member caption for header
lbl.Text = cst.Axes[1].Positions[cur_row –
col_dim_count].Members[cur_col].Caption.Replace(“,”, ” “);
td.CssClass = “titleLeftLockedCell”; // this lockeders
//the cell so it doesn’t scroll leftwards
}
else
{
//this is data cell.. so we write the Formatted value of the cell.
lbl.Text = cst[cur_col – row_dim_count, cur_row – col_dim_count].FormattedValue;
//td.InnerText = cst[cur_col – row_dim_count,
//cur_row – col_dim_count].FormattedValue;
td.CssClass = “valueCell”; //this right
//aligns the values in the column
}
//turn the wrapping off for row header and data cells.
td.Wrap = true;
}
if (((lbl.Text != previousText) || (lbl.Text == ” “))
&& (cur_row < col_dim_count))
{
tr.TableSection = TableRowSection.TableHeader;
th.Text = “HEADER”;
th.Controls.Add(lbl);
tr.Cells.Add(th);
tblgrid.Rows.Add(tr);
}
else if ((lbl.Text != previousText) || (lbl.Text == ” “) ||
(lbl.Text == null) || (lbl.Text == “”))
{
td.Controls.Add(lbl);
tr.Cells.Add(td);
tblgrid.Rows.Add(tr);
}
else
{
try
{
tr.Cells[tr.Cells.Count – 1].ColumnSpan = colSpan;
}
catch
{
}
}
if (cur_row < col_dim_count)
previousText = lbl.Text;
}
//result.AppendLine();
}
using (StringWriter writer = new StringWriter())
{
HtmlTextWriter htw = new HtmlTextWriter(writer);
tblgrid.RenderControl(htw);
return htw.InnerWriter.ToString();
}
}
catch (Exception ex)
{
throw ex;
}
[/csharp]

Finally, the function will return the output as an HTML table with the id “myhtmltab” where all the th, tr and td tags are rendered.

Now if you want, you can convert the HTML table to an Array, JSON in the client side.

Now what we need to do is just add the dynamic HTML to the DOM. You can do that as follows:
[js]
$(‘#your element id’).html(data);
[/js]

Please read here for more information: Get the HTML contents of the first element in the set of matched elements.

Convert HTML to Array Dynamically in jQuery

Let’s say you have an Ajax jQuery function that will return the output as I have shown in the output image.

If you are new to jQuery Ajax function, please read here:

Bind Dropdownlist in ASP.NET using jQuery AJAX
Jquery Ajax Calling Functions
Code Builder for jQuery AJAX (Calling Web Services)

Then in the success of the Ajax function, you can write the code like this to formulate an array.

Next is to get the columns and rows from the dynamic HTML table that you just formulated using CellSet:
[js]
var rows = $(“#myhtmltab tbody tr”); //Select Rows , looping through every tr
var columns = $(“#myhtmltab thead th”); //Select columns , looping through every th
[/js]
Now what we need is an Array where we can populate the data. 🙂
[js]
var data = [];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var datarow = {};
for (var j = 0; j < columns.length; j++) {
// get column’s title.
var columnName = $.trim($(columns[j]).text());
// select cell.
var cell = $(row).find(‘td:eq(‘ + j + ‘)’);
datarow[columnName] = $.trim(cell.text());
}
data[data.length] = datarow;
}
[/js]

Now this is the time to formulate a JSON from the table. 🙂

Convert Dynamic HTML to JSON Dynamically in jQuery

As we discussed above, here also we are looping through the column and rows. The intent behind this is to formulate a dynamic JSON to assign data to my JQX Grid (You can check this out: Working With JQX Grid With Filtering And Sorting).
[js]
var varDataFields = ‘[‘;
var varDataColumns = ‘[‘;
var typ = ‘string’;
var align = ‘center’;
var width = ‘200’;
var myColumns = $(“#myhtmltab thead th”);
for (var j = 0; j < myColumns.length; j++) {
var column = myColumns[j];
var col = $(column).text().trim();
//col = col.replace(‘’, ”);
//col = col.replace(‘’, ”);
//var col = $(columns).find(‘th:get(‘ + j + ‘).find(‘ < span > ‘).text()’);
//if (!col == ”) {
varDataFields = varDataFields +
‘ { \”name\” : \”‘ + col + ‘\” , \”type\” : \”‘ + typ + ‘\”},’;
varDataColumns = varDataColumns +
‘ { \”text\” : \”‘ + col + ‘\” , \”dataField\” : \”‘ +
col + ‘\” , \”align\” : \”‘ + align + ‘\” , \”width\” : \”‘ + width + ‘\”},’;
//}
if (j == myColumns.length – 1) {
varDataFields = varDataFields.slice(0, -1);
varDataColumns = varDataColumns.slice(0, -1)
}
}
varDataFields = varDataFields + ‘]’;
varDataColumns = varDataColumns + ‘]’;
varDataFields = varDataFields.trim();
varDataColumns = varDataColumns.trim();
var DataFields = $.parseJSON(varDataFields);
var DataColumns = $.parseJSON(varDataColumns);
[/js]

So in DataFields, DataColumns, I will get the JSON in the way that I want. This I can directly bind to the JQX Grid. 🙂

Points of Interest

ADOMD, MDX

History

First version: 27-Oct-2014

Kindest Regards
Sibeesh Venu