Get ListView elements into JavaScript Array

Question

1.00/5 (1 vote)

See more:

If anyone can help me, have a post here, please give me some direction. I believe its easier to just post the link, than to rewrite to whole thread again. Thanks.

http://forums.asp.net/t/1906515.aspx/1?Getting+ListView+ul+li+asp+label+values+into+a+javascript+array

Posted 16-May-13 12:55pm

mfisher8

Add a Solution

2 solutions

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)

mfisher8 · Accepted Answer · 2013-06-04T05:53:00

Hi Sergey, I have the solution! Thank you very much for all of your input, and for pushing me to develop the solution. This code could probably be shortened a bit, but it is working. I ended up changing the

classname, and the class names that I assigned to my labels. One thing that I found out was, if a labels "Visible" property is set to false,(some values I did not want to show the user) .Net will not render it in the browser. So, to get around this, I set the labels Visible property to "true", and I juse set the Css to display:none; This worked good. Here is the original HTML, and the scripts. Thank you very much for the links Sergey!

ASP.NET

<!-- DataList holds locations returned from DB -->
        <asp:datalist id="healthCenters" cssclass="hcListing" runat="server" xmlns:asp="#unknown">
        EnableViewState="False" DataKeyField="LocationID">
        <itemtemplate>
        <table class="locations" border="0">
        <tr class="details">
          <td class="locationDetails"><asp:hyperlink cssclass="hcName" id="hlCenterName" runat="server" text="<%# Eval("CenterName") %>" navigateurl="<%# Eval("LocationID", "searchResponse.aspx?LocationID={0}") %>"></asp:hyperlink><br />
        Address: <asp:label cssclass="address" id="lblAddress" runat="server">
                  Text='<%# Eval("Address") %>' /><br />
        City/State:     <asp:label cssclass="city" id="lblCity" runat="server" text="<%# Eval("City") %>" /> , 
                        <asp:label cssclass="state" id="lblState" runat="server" text="<%# Eval("State") %>" /><br />
        Zip:            <asp:label cssclass="zip" id="lblZipCode" runat="server">
                           Text='<%# Eval("ZipCode") %>' /><br />
        Phone:          <asp:label cssclass="phone" id="lblPhoneNumber" runat="server">
                           Text='<%# String.Format("{0:(###) ###-####}",Convert.ToInt64(Eval("PhoneNumber"))) %>' /><br />
        Web:            <asp:hyperlink cssclass="url" id="webSite" runat="server" navigateurl="<%# Eval("Website") %>">
                           Text='<%# Eval("Website") %>'>HyperLink</asp:hyperlink><br />
        Patient Services:<asp:label cssclass="services" id="lblPatientServices" runat="server">
                            Text='<%# Eval("PatientServices") %>' /><br />
        Distance:        <asp:label cssclass="distance" id="lblRadius" runat="server" visible="True">
                            Text='<%# String.Format("{0:0.##}", Eval("DistanceMiles")) + " " + "miles." %>' /><br />
                         <asp:label cssclass="locationId" id="lblLocationID" runat="server" visible="true">
                            Text='<%# Eval("LocationID") %>' /><br />
                         <asp:label cssclass="lat" id="lblLat" runat="server" visible="true" text="<%# Eval("Lat") %>" /><asp:label cssclass="lng" id="lblLng" runat="server" visible="true" text="<%# Eval("Long") %>" />
                         <br />
        </asp:label></asp:label></asp:label></asp:label></asp:label></asp:label></td>
        </tr>
        </table>
    </itemtemplate>
        </asp:datalist>

//the javascript

C#

function AddData() {

    var locationAry = [];
    //Use the jQuery .each() function to get each item
    $("td.locationDetails").each(function (i, elem) {
        var liListContent = {};
        liListContent.centerName = $(this).find(".hcName").html();
        liListContent.centeraddress = $(this).find(".address").html();
        liListContent.centerCity = $(this).find(".city").html();
        liListContent.centerState = $(this).find(".state").html();
        liListContent.centerZip = $(this).find(".zip").html();
        liListContent.centerPhone = $(this).find(".phone").html();
        liListContent.centerDistance = $(this).find(".distance").html();
        liListContent.centerId = $(this).find(".locationId").html();
        liListContent.centerLatitude = $(this).find(".lat").html();
        liListContent.centerLongitude = $(this).find(".lng").html();
        locationAry[i] = liListContent;
    });
    for (var i = 0; i < locationAry.length; i++) {

//        for (var prop in locationAry[i]) {
            //alert("prop: " + prop + " value: " + locationAry[i][prop]);

        var title = locationAry[i].centerName;
        var address = locationAry[i].centeraddress;
        var city = locationAry[i].centerCity;
        var state = locationAry[i].centerState;
        var zip = locationAry[i].centerZip;
        var phone = locationAry[i].centerPhone;
        var distance = locationAry[i].centerDistance;
        var latitude = parseFloat(locationAry[i].centerLatitude);
        var longitude = parseFloat(locationAry[i].centerLongitude);
        var pinLocations = new Microsoft.Maps.Location(parseFloat(locationAry[i].centerLatitude), parseFloat(locationAry[i].centerLongitude));
        var description = locationAry[i].centeraddress + '<br/>' + locationAry[i].centerCity + '<br/>' +
             locationAry[i].centerState + '<br/>' + locationAry[i].centerPhone + '<br/>' + locationAry[i].centerDistance;


        for (p = 0; p < locationAry.length; p++) {
        p = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(locationAry[i].centerLatitude), parseFloat(locationAry[i].centerLongitude)));
        p.Title = title;
        p.Description = description;
        Microsoft.Maps.Events.addHandler(p, 'click', displayInfobox);
        dataLayer.push(p);
                    }

        }

    function displayInfobox(e) {
        if (e.targetType == 'pushpin') {
            infobox.setLocation(e.target.getLocation());
            infobox.setOptions({ visible: true, showPointer: true, title: e.target.Title, description: e.target.Description });
        }
    }
}

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-05-16T13:29:00

Solution 1

You can use jQuery: http://api.jquery.com/children/[^].

This is one of traversing functions; please see: http://api.jquery.com/category/traversing/[^].

Alternatively, you can use some other jQuery selector by some property which is common to all children but not other HTML elements on the page, such as CSS class (using a class selector) or having the same parent (with the effect similar to the traversing case shown above). Naturally, it should not be the id selector is the id attribute implies uniqueness of its value (I refer to the mistake done by one of the inquirers, don't repeat it). Please see:
http://api.jquery.com/category/selectors/[^],
http://api.jquery.com/class-selector/[^],
http://api.jquery.com/child-selector/[^].

The production of those methods will give you some collection of XML DOM elements (in jQuery wrapper).

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://learn.jquery.com[^],
start here: http://learn.jquery.com/about-jquery/how-jquery-works/[^].

—SA

Posted 16-May-13 13:29pm

Sergey Alexandrovich Kryukov

Comments

mfisher8 17-May-13 9:19am

Thank you for your reply, I do plan to learn jquery, but for now, I would like to retrieve these values from my HTML. What is the difference between javascript & jquery? Here is my HTML:

<asp:ListView ID="healthCenters" runat="server" DataKeyNames="CenterName,LocationID,Lat,Long">
<layouttemplate>
<ul id="myList">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>

<itemtemplate>
<li><asp:HyperLink ID="hlCenterName" runat="server" Text='<%# Eval("CenterName") %>' NavigateUrl='<%# Eval("LocationID", "searchResponse.aspx?LocationID={0}") %>' ></li>
<li style="list-style:none">Type of Center: <asp:Label ID="lblTypeofCenter" runat="server" Text='<%# Eval("TypeofCenter") %>' /></li>
<li style="list-style:none"><asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' /></li>
<li style="list-style:none"><asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>' /> , <asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>' /></li>
<li style="list-style:none"><asp:Label ID="lblZipCode" runat="server" Text='<%# Eval("ZipCode") %>' /></li>
<li style="list-style:none">Phone:<asp:Label ID="lblPhoneNumber" runat="server" Text='<%# String.Format("{0:(###) ###-####}",Convert.ToInt64(Eval("PhoneNumber"))) %>' /></li>
<li style="list-style:none"><asp:HyperLink ID="webSite" runat="server" NavigateUrl='<%# Eval("Website") %>' Text='<%# Eval("Website") %>'>HyperLink</li>
<li style="list-style:none">Patient Services: <asp:Label ID="lblPatientServices" runat="server" Text='<%# Eval("PatientServices") %>' /></li>
<li style="list-style:none">Distance: <asp:Label ID="lblRadius" runat="server" Visible="True" Text='<%# String.Format("{0:0.##}", Eval("DistanceMiles")) + " " + "miles." %>' /></li>
<li style="list-style:none"><asp:Label ID="lblLocationID" runat="server" Visible="false" Text='<%# Eval("LocationID") %>' /></li>
<li style="list-style:none"><asp:Label ID="lblLat" runat="server" Visible="False" Text='<%# Eval("Lat") %>' /><asp:Label ID="lblLng" runat="server" Visible="False" Text='<%# Eval("Long") %>' /></li>

Sergey Alexandrovich Kryukov 17-May-13 9:27am

You could read that jQuery is merely a JavaScript library. So, your "for now" does no make whole lot of sense, if would simply mean that you would need to write something which is already written in jQuery very well and fully tested by many people.
—SA

mfisher8 17-May-13 9:30am

But I noticed that some of the syntax is different, I am new to javascript, and I have never used the $ sign. Sorry, I did not know that jquery is a javascript library, its why I'm coming here for help, to learn. Thank you.

Sergey Alexandrovich Kryukov 17-May-13 9:46am

It is not different. If you are new to JavaScript (and even not very new) jQuery looks a bit weird. This is poor JavaScript syntax, and '$' is just a valid but unusual identifier name taken up by the library. This is the name of some very universal jQuery function which tries to build a complex wrapper object out or any string...
—SA

mfisher8 17-May-13 9:32am

I just want to know, which HTML element should I be pulling my values from? The <li> or the <asp:> elements.

Sergey Alexandrovich Kryukov 17-May-13 9:57am

Right question. Here is what to do:

First of all, I assume you already have working code which shows some list view. Run it and look at the page in your browser. Look at generated HTML source. (It will be browser's View Page Source menu item or something like that.) If <li> elements are your children, loop at the parent element. It won't be <asp:...> as it will be translated to appropriate HTML element. In other words, find out which <asp:...> element is translated to HTML element which is the parent. At this time, I don't know myself, would need to do the same or look in documentation. Probably, you already know what is it.

Now, make sure you give this element some unique id attribute. On the ASP.NET side, this is done via Control.ClientID, which also depends on Control.ClientIDMode:

http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx

I hope this is clear. Now, let's assume the value of ClienID is something like "listParent", it means the parent element has id="listParent".

As you could learn from jQuery selectors, it gives you a way to find document.getElementById; in jQuery, this is simpler:

myListParent = $("#listParent") // same as document.getElementById("myListParent")

That's it. I hope you got it all and can accept my answer formally (green button). :-)

—SA

mfisher8 17-May-13 15:51pm

Sergey,
I have a question about this post:
When you say that " If <li> elements are your children, loop at the parent element. It won't be <asp:...> as it will be translated to appropriate HTML element. In other words, find out which <asp:...> element is translated to HTML element which is the parent." I am a little confused.
How can my <asp> elements be my parents when they are in a <li> element as part of a list?
Please explain this to me. I have labels in my ListView.
I tried this:
function AddData() {
var locationDB = document.getElementsById('myList').getElementByClassName("details");
var locationAry = [];

// fetch locations returned by database
var items = locationDB;
if (items.length == 0) {
clearMap();
return;
}
// loop through found locations in the database
for (var i = 0; i < items.length; i++) {
var locationid = items[i].getAttribute('<%=lblLocationID.ClientID%>');
var healthCenterName = items[i].getAttribute('<%=hlCenterName.ClientID%>');
var typeofCenter = items[i].getAttribute('<%=lblTypeofCenter.ClientID%>');
var address = items[i].getAttribute('<%=lblAddress.ClientID%>');
var city = items[i].getAttribute('<%=lblCity.ClientID%>');
var state = items[i].getAttribute('<%=lblState.ClientID%>');
var zipCode = items[i].getAttribute('<%=lblZipCode.ClientID%>');
var phone = items[i].getAttribute('<%=lblPhoneNumber.ClientID%>');
var url = items[i].getAttribute('<%=webSite.ClientID%>');
var services = items[i].getAttribute('<%=lblPatientServices.ClientID%>');
var distance = parseFloat(items[i].getAttribute('<%=lblRadius.ClientID%>'));
var location = new Microsoft.Maps.Location(parseFloat(items[i].getAttribute('<%=lblLat.ClientID%>')), parseFloat(items[i].getAttribute('<%=lblLng.ClientID%>')));
var description = address + ' ' + city + ' ' + state + ' ' + phone + ' ' + url + ' ' + distance;
// push location to array for use in map viewing
locationAry.push(location);

Sergey Alexandrovich Kryukov 17-May-13 16:15pm

With jQuery, you don't need getElementBy..., use jQuery selectors:


list = $("#myList");
children = list.children();
children.each(function(item, element){
    // do something
    element["addSomeProperty"] = index; // whatever
    // "element" is the same as your item, more exactly, its jQuery wrapper (it also can use any jQuery functions defined)
})

See the references, you will find all jQuery code samples. For example, items could be not your immediate children, so find indirect children.

You can also filter our some children by selector, see the very first link...

—SA

mfisher8 17-May-13 19:25pm

I'm trying Sergey, this is all new to me.
Here is what I have, its giving me an error on this:
items.foreach(function () {//its saying that foreach is not a recognized function

Here is what i did, I'm not sure what to put for index?? Should I put my pure HTML?

function AddData() {

var locationAry = [];
var locationDB = $("#myList li");
children = locationDB.children();
// fetch locations returned by database
var items = children;
if (items.length == 0) {
clearMap();
return;
}
// loop through found locations in the database
items.foreach(function () {
for (var i = 0; i < items.length; i++) {
this['locationid'] = index;
this['healthCenterName'] = index;
this['typeofCenter'] = index;
this['address'] = index;
this['city'] = index;
this['state'] = index;
this['zipCode'] = index;
this['phone'] = index;
this['url'] = index;
this['services'] = index;
this['distance'] = index;
this['location'] = new Microsoft.Maps.Location(parseFloat(items[i].getAttribute('Lat')), parseFloat(items[i].getAttribute('Long')));
var description = address + ' ' + city + ' ' + state + ' ' + phone + ' ' + url + ' ' + distance;
// push location to array for use in map viewing
locationAry.push(location);

var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location));
pin1.Title = healthCenterName;
pin1.Description = description;
Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
dataLayer.push(pin1);

}
})
function displayInfobox(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.getLocation());
infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
}
}

Sergey Alexandrovich Kryukov 17-May-13 19:44pm

I cannot see what's wrong right now...
—SA

mfisher8 18-May-13 21:22pm

Hi Sergey,
Thank you for the links, I realize how important it is for me to learn jQuery now, and how valuable it will be to me as a web developer.You have been very helpful, thank you. I spent most of the day studying all of the tutorials. I still do not have my values :-) but, the experience is worth it! I believe that I need to reference my pure html(see below):
<ul id="myList">

<li>Philadelphia District health Center #10</li>
<li style="list-style:none">Type of Center: FQHC</li>
<li style="list-style:none">2230 Cottman Ave.</li>
<li style="list-style:none">Philadelphia , PA</li>
<li style="list-style:none">19149</li>
<li style="list-style:none">Phone:(215) 685-0602</li>
<li style="list-style:none">http://www.phila.gov/health/ambulatoryhealth/hc10.html</li>
<li style="list-style:none">Patient Services: Primary Care, Dental Care, Pediatrics, Women's Health, Behavioral Health</li>
<li style="list-style:none">Distance: 4.66 miles.</li>
<li style="list-style:none"></li>
<li style="list-style:none"></li>
 

<li>Frankford Avenue Health and Dental Centers</li>
<li style="list-style:none">Type of Center: FQHC</li>
<li style="list-style:none">4510 Frankford Ave.</li>
<li style="list-style:none">Philadelphia , PA</li>
<li style="list-style:none">19124</li>
<li style="list-style:none">Phone:(215) 744-1302</li>
<li style="list-style:none">http://www.gphainc.org/</li>
<li style="list-style:none">Patient Services: Primary Care, Dental Care, Pediatrics, Women's Health</li>
<li style="list-style:none">Distance: 4.7 miles.</li>
<li style="list-style:none"></li>
<li style="list-style:none"></li>
 
The values I want to get at are the:
span id="healthCenters_lblTypeofCenter //and so on, correct? I thought about this:
$('ul#myList li a').each(function(){
myList.push({name: $(this).text() ,id:$(this).attr("a")});
});
I have been working under the debugger in Visual studio, yes, it is how I keep getting closer, besides your direction :-) I do not want the answer, I am just looking to be corrected, and I appreciate all of your help.

Sergey Alexandrovich Kryukov 17-May-13 19:54pm

Ah, sorry, it was my typo.

Please use .each(function(index, element)):
http://api.jquery.com/jQuery.each/

Please check every step with jQuery documentation, which is actually easy to find. I did not call all of these methods myself, but when I do something for the first time, I manage to write code correctly if I look for documentation, it's just needs some patience. Can you work under the debugger in Visual Studio? it helps a lot...

—SA

Sergey Alexandrovich Kryukov 17-May-13 16:31pm

Your items like address, city, etc. are children on the second order of hierarchy, they are the children of each list item, are accessed in a similar way (via jQuery item.children(), for example). Again, look at pure HTML via "View Page source" when the page is shown...
—SA

Sergey Alexandrovich Kryukov 18-May-13 21:57pm

I don't quite understand "How can my elements be my parents when they are in a <li> element as part of a list?". The relationships (used, for example in jQuery .children() method) looks like this: in

<someElement><someOtherElement>...</someOtherElement><someOtherElement>...</someOtherElement></someElement>
each of the <someOtherElement> elements is the child of <someElement>; <il> is usually the child of <ul> or <ol>...

—SA

mfisher8 22-May-13 11:00am

Greetings Sergey! I have been making progress. I now have all of my values from my ListView.Here is what I did:
function AddData() {
var myList = $("li");
locationDB = myList.children();
locationDB.each(function (item, element) {
if (locationDB.length == 0) {
clearMap();
return;
}
// loop through found locations returned from the database
for (var i = 0; i < locationDB.length; i++) {

var healthCenterName = element["id"];
The problem I have now is, I'm not sure how to put "element["id"] and the element["innerHTML"] into an array. I only need the element["innerHTML"]. I read all of the links that you provided and they are not clear.Can you make a suggestion? Thank you.

Sergey Alexandrovich Kryukov 22-May-13 12:01pm

You can set any attribute in jQuery:
http://api.jquery.com/attr/
http://forum.jquery.com/topic/is-it-possible-to-set-id-to-dynamically-created-div

—SA

mfisher8 23-May-13 10:15am

I have tried everything that you told me, too. I keep getting the "CenterName" for each element:
function AddData() {
var myList = $("li");
locationDB = myList.children();
var locationAry = [];
locationDB.each(function (item, element) {// loop through found locations returned from the database
var tagName = element["id"];
if (tagName.match("CenterName") == "CenterName") {
var healthCenterName = element["innerHTML"];
var typeofCenter = element["innerHTML"];
var address = element["innerHTML"];
var city = element["innerHTML"];
var state = element["innerHTML"];
var zipCode = element["innerHTML"];
var phone = element["innerHTML"];
var url = element["innerHTML"];
var services = element["innerHTML"];
var distance = element["innerHTML"];
var locationid = element["innerHTML"];
var location = new Microsoft.Maps.Location(parseFloat(element["innerHTML"]), parseFloat($(element["innerHTML"])));
var description = address + ' ' + city + ' ' + state + ' ' + phone + ' ' + url + ' ' + distance;
}

var content = {};
//set object element
content.id = element["id"];
content.context = element["innerHTML"];

// push location to array for use in map viewing
locationAry.push(content);
When I look ay it in the debugger, every var has the CenterName instead of: city, state, zipcode, etc...

Sergey Alexandrovich Kryukov 23-May-13 12:58pm

Is it a problem? I feel that all you need is to keep developing it...
—SA

mfisher8 17-May-13 9:48am

The <asp:> elements are the children of my <li> elements then, correct?

Sergey Alexandrovich Kryukov 17-May-13 9:58am

You can check up which one, exactly. I explained it all above...
—SA