Best way to pass c# data to javascript and break apart into a useable format

Question

4.00/5 (1 vote)

See more:

, +

I am working on a project and am struggling after a lot of googling to find the best way to do this without using third party libraries. I would love some advise on this as its critical do getting my program correct.

My program is a C# webforms application with a Html/javascript front end. The C# side runs Sql queries on a Sql compact database and is meant send the data over to the javascript to be taken a part and loaded 1 row at a time.

I have a table of shops which has ID, Name,Address and Category fields.

C#

        DataSet ds = new DataSet();
        adapter.Fill(ds);

        List<Shop> shops = new List<Shop>();

        foreach (DataRow row in ds.Tables[0].Rows)
        {

            string ID = row["ShopID"].ToString();
            string Name = row["ShopName"].ToString();
            string Address = row["ShopAddress"].ToString();
            string Category = row["Category"].ToString();

            shops.Add(new Shop(ID, Name, Address, Category));

        }

JavaScriptSerializer ser = new JavaScriptSerializer();
hfData.Value = ser.Serialize(shops);

This part seems to work perfectly, the data is loaded correctly and put into a hiddenfield called hfData.

While on the front end I have this line which is supposed to read the hiddenfield

JavaScript

  var HiddenValue = document.getElementById("<%=hfData.Value%>").value;
alert(HiddenValue);

The HiddenValue alert comes back in this format.

"[{"ShopID":"1","ShopName":"PubName1","ShopAddress":"1 Example street, exampleTown, postcode","ShopCategory":"English"},{"ShopID":"2","ShopName":"PubName2","ShopAddress":"2 Example street, exampleTown, postcode","ShopCategory":"Irish"}]"

How do I then take that data and formatted so I can output the ShopName etc for the first shop separately so it can be displayed. The format seems to group a row in {} and the "FieldName" : "Data" although I don't have the experience to manipulate this so need advise.

The Text is meant to be converted to variables inside a for loop and displayed in a readable format. The address is meant to be separate string so I can send it to the google maps API to be displayed so its important to split them up

Assuming this is the best way I can pass data across, if there is a better way please tell me, although I would like to know the solution for this problem as well so It doesn't occur again

Posted 10-Jan-13 16:30pm

Phoenix234

Add a Solution

3 solutions

Solution 2

you can use the eval method to get the data in form of an object.

do it like this:

JavaScript

var myObject = eval('(' + document.getElementById("<%=hfData.Value%>").value + ')');

alert(myObject.ShopID);
alert(myObject.PubName1);

Similarly you can use all the properties of the javascript object which you have retrieved as JSON.

P.S. I suggest you read javascript eval documentation to get the complete understanding of it.

Posted 10-Jan-13 18:36pm

Rahul Rajat Singh

Comments

Phoenix234 11-Jan-13 21:47pm

this was great to get the data out of the hiddenfield, I've added a loop to go through it but how do I now generate lines of html? like I want the output to be wrapped in a div for every row that comes out s

Solution 1

Hi,

You can get your answer :

http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each[^]

Posted 10-Jan-13 17:51pm

Suvabrata Roy

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ramukhsakarp · Accepted Answer · 2013-01-10T19:15:00

Solution 3

JavaScript

 $(document).ready(function () {
            var data = [{"ShopID":"1","ShopName":"PubName1","ShopAddress":"1 Example street, exampleTown, postcode","ShopCategory":"English"},{"ShopID":"2","ShopName":"PubName2","ShopAddress":"2 Example street, exampleTown, postcode","ShopCategory":"Irish"}];

            $.each(data, function (i, item) {
                document.write(item.ShopID + ", " + item.ShopName + ", " + item.ShopAddress + ", " + item.ShopCategory);
            });
});

As per your requirements,
you can replace document.write statement and store values in a array variable and then can be sent to GoogleMaps API

Note: This Code uses $.each() requires Jquery Library to be included in JS

<quote>

Quote:
"[{"ShopID":"1","ShopName":"PubName1","ShopAddress":"1 Example street, exampleTown, postcode","ShopCategory":"English"},{"ShopID":"2","ShopName":"PubName2","ShopAddress":"2 Example street, exampleTown, postcode","ShopCategory":"Irish"}]"

this string is in JSON Format --> Key: Value, hence using jQuery is one of the easiest Method to Manipulate it.

Posted 10-Jan-13 19:15pm

ramukhsakarp

Comments

Phoenix234 11-Jan-13 12:28pm

I love your design although I have a few issues I need help on. I combined your code with the code of the solution above. I use the

var data = eval('(' + document.getElementById("<%=hfData.ClientID%>").value + ')');

and then the each from yours but it remakes the data on a blank page when its meant to be inside a list on my main page. I tried to use this code but it only makes the last row of the dataset put in instead of adding a new one.

var newcontent = document.createElement('li');
newcontent.appendChild(document.createTextNode(item.ShopName + " " + item.ShopAddress + " " + item.ShopCategory + " Rating: 3 Stars "));

Help?

ramukhsakarp 14-Jan-13 23:13pm

var newcontent = document.createElement('li');
$.each(data, function (i, item) {
newcontent.appendChild(document.createTextNode(item.ShopName));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createTextNode(item.ShopAddress+" "));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createTextNode(item.ShopCategory));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createTextNode(" Rating: 3 Stars"));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createElement('br'));
});
then to display the result, create/use any div in your main page, like document.getElementById("anyDiv").appendChild(newcontent);

hope this works!!!

Phoenix234 15-Jan-13 10:09am

Thank you very much! everything works perfectly now :)

Accepted