Call a list in code behind of ASPX , in javascript code in foreach loop?

Question

I have the following aspx.cs :

public partial class BarChart 
{
    public class LabelsDetail
    {
        public string LabelId { get;set; }
        public string LabelDesc { get; set; }
    }
    public List<LabelsDetail> LabelsDetails { get; set; }

    public void InsertDataToLabelsDetails()
    {
        // Data comes from somewhere into "LabelsDetails"

    }

}

and the following JS code in the ASPX page :

        function setupBarChart(JQObjectContainer, JsonData) {
            var hashTableSize = <%=this.LabelsDetails.Count%>;
            var hashtable = {};

            if (hashTableSize != 'undefined' && hashTableSize > 0)
            {
                for (var item in <%=this.LabelsDetails%>)
                { 
                    hashtable[item.LabelId] = item.LabelDesc;
                }
            }

}

How can I do a foreach on a server side list in the client side ?

At the moment I get Uncaught SyntaxError: Unterminated template literal When I try to loop on the server side list (this.LabelsDetails) .

Thanks

this.LabelsDetails is just going to turn into the typename, as if you had called .ToString() on it. You need to convert it to JSON, embed it in your JavaScript, convert from JSON back to a JavaScript array, and loop over that. Or even better, retrieve the list via AJAX calls to Web API. — mason
– mason, Commented May 5, 2015 at 13:47
you are trying to mix server side code and client side code. — Arun Raj
– Arun Raj, Commented May 5, 2015 at 13:48

Arun Raj · Accepted Answer · 2015-05-05 14:04:31Z

2

Try This

function setupBarChart(JQObjectContainer, JsonData) {
            var hashTableSize = <%=this.LabelsDetails.Count%>;
            var hashtable = {};
            var json = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.LabelsDetails)%>;
            if (hashTableSize != 'undefined' && hashTableSize > 0)
            {
                for (var key in json)
                { 
                    hashtable[json[key].LabelId] = json[key].LabelDesc;
                }

            }
}

answered May 5, 2015 at 14:04

Arun Raj

96910 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luizgrs · Accepted Answer · 2015-05-05 14:18:12Z

1

You must convert your collection to a notation that JavaScript will understand, to do that you can use JavaScriptSerializer or any other JSON converter:

var collection = new[]{
    new { Name = "a" },
    new { Name = "b" },
    new { Name = "c" },
    new { Name = "d" }
};

System.Web.Script.Serialization.JavaScriptSerializer s = new System.Web.Script.Serialization.JavaScriptSerializer();

Console.WriteLine(s.Serialize(collection));

This will output [{"Name":"a"},{"Name":"b"},{"Name":"c"},{"Name":"d"}] whhich is a valid array notation for JavaScript. You also can improve the way you iterate in JS:

var array = <%=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.LabelsDetails)%>;
for(var x=0;x<array.length;x++)
{ 
    hashtable[array[x].LabelId] = array[x].LabelDesc;
}

For...In is not good to iterate arrays in JS, it's not the same as foreach in C#.

From MDN:

Array iteration and for...in

Note: for..in should not be used to iterate over an Array where the index order is important. Array indexes are just enumerable properties with integer names and are otherwise identical to general Object properties. There is no guarantee that for...in will return the indexes in any particular order and it will return all enumerable properties, including those with non–integer names and those that are inherited.

However, it might be worth to review your approach and use other technologies to do the connection between client-side and server-side.

edited May 5, 2015 at 14:18

answered May 5, 2015 at 13:51

Luizgrs

4,8911 gold badge24 silver badges31 bronze badges

4 Comments

JAN Over a year ago

Thanks , but this is not an array , it's a string .I need to loop on array , not a string ...

Luizgrs Over a year ago

did you try it? You're getting a memory object and converting it to a string which will be written in JavaScript and interpreted as a literal notation of array. For the JS compiler it will not be a string, it will be an array...

JAN Over a year ago

Yes I did , however each iteration the item is 0 , meaning you have the JS array , but the item holds nothing .

Luizgrs Over a year ago

the problem is your loop, for...in in JS is not the same as c# foreach, updated the answer to explain that

Collectives™ on Stack Overflow

Call a list in code behind of ASPX , in javascript code in foreach loop?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related