read xml attribute from file into js file

Question

I'm trying to make a simple data list from an XML document. I have had this working a few different ways but they keep changing the XML document on me. Also note this has to work on IE, Chrome and Firefox. Also note it will be used in a CMS called Net Forum. So I'm trying to keep the code real basic and avoid third party libraries/plugins. I'm trying to use Jquery and I have it working but as I said before they changed the XML so now it needs to read by the attribute value and not the Node:

XML Snippet:

<PRODUCTS>
  <PRODUCT Category="Leadership and Governance">
    <Product>
      <prd_name>Governance in High Performing Organizations: A Comparative Study of Governing Boards In Not-For-Profit Hospitals</prd_name>
    </Product>
  </PRODUCT>
  <PRODUCT Category="Planning and Strategy">
    <Product>
      <prd_name>Results-Oriented Strategic Planning</prd_name>
    </Product>
  </PRODUCT>
</PRODUCTS>

HTML Snippet:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="content/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="Scripts/jquery-ui-1.12.1.js"></script>
    <script src="js-auto-complete-3.js"></script>
</head>
<body>
    <div align="center" id="container">
        <font color=#04418e size="6">eWeb Products</font><br><br>
        <div id="search">
            <datalist id="dl_search" style="overflow-y: auto!important"></datalist>
            <select name="filter" id="filter">
                <option value="All" selected="selected">All</option>

                <option value="Coding and Billing">Coding and Billing</option>
                <option value="Data Products">Data Products</option>
                <option value="Design and Construction">Design and Construction</option>
                <option value="Environmental Services">Environmental Services</option>
                <option value="Facilities Management">Facilities Management</option>
                <option value="Health Information Technology">Health Information Technology</option>
                <option value="Human Resources">Human Resources</option>
                <option value="Leadership and Governance">Leadership and Governance</option>
                <option value="Learning Product">Learning Product</option>
                <option value="Marketing and Communications">Marketing and Communications</option>
                <option value="Materials Management">Materials Management</option>
                <option value="Membership">Membership</option>
                <option value="Nursing Leadership">Nursing Leadership</option>
                <option value="Patient Safety Quality and Advocacy">Patient Safety Quality and Advocacy</option>
                <option value="Planning and Strategy">Planning and Strategy</option>
                <option value="Risk Management">Risk Management</option>
                <option value="Social Work">Social Work</option>
                <option value="Volunteers and Auxilians">Volunteers and Auxilians</option>
                <option value="Workforce">Workforce</option>
            </select>
            <input id="txt_search" size="100" />
        </div>
        <br> <br>
    </div>
</body>
</html>

Javascript Snippet:

$(document).ready(function() 
        {
            var DataList = [];
			BuildDataList();
			//DataList["txt_search"] = DataList;
			
            $("input").on("keypress", function () {			
				//populate($(this).data());
				populate2();
            });
			
			$("select").on("change", function() {	
				DataList = [];
				BuildDataList();
				//DataList["txt_search"] = DataList;
				//populate($(this).data());	
				populate2();
			});
			
			function populate(data)
			{
				var element = $('#' + data.listid);
				var items = DataList[data.list];
				var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
				
				element.find('option').remove().end();
				
				$.each(items, function (index, value) 
				{
					element.append('<option value = "' + value + '"/>');
				});
				
				$( ".selector" ).autocomplete( "option", "appendTo", "#search" );
			}
			
			$( function populate2 () 
			{
				$( "#txt_search" ).autocomplete({ source: DataList});
			} );
			
			function BuildDataList() {
				$.ajax({
					type: "GET",
					async: false,
					//url: "XML_F52E2B61-18A1-11d1-B105-00805F49916B13.xml",
					url: "XML_F52E2B61-18A1-11d1-B105-00805F49916B2-new.xml",
					cache: false,
					dataType: "xml",
					success: function(xml) {
						 var filter = $('#filter :selected').text();				 
						 					 
						 switch (filter)
						 {
							 case "All":
								//Design And Construction
								DataList.push("Design And Construction");
								$(xml).find('DesignAndConstruction Product').each(function()
								 {
									 var name
									 var code
									 var description							 
									 
									//Add Product Names To List								 
									$(this).find("prd_name").each(function(){
										//var name = $(this).text();	
										name = $(this).text();										
										 //DataList.push(String(name));											
									});
									
									//Add Product Codes To List
									$(this).find("prd_code").each(function(){
										//var code = $(this).text();	
										code = $(this).text();
										 //DataList.push(String(code));
									});
									
									//Add Product Descriptions To List
									$(this).find("prd_description").each(function(){
										//var description = $(this).text();	
										description = $(this).text();	
										 //DataList.push(String(description));
									});								
									
									DataList.push("Product Name: " + name);
									DataList.push("Product Code: " + code);
									DataList.push("Product Description: " + description);
									DataList.push(String("==="));
								});
								
								//Environmental Services
								DataList.push("Environmental Services");
								$(xml).find('EnvironmentalServices Product').each(function()
								 {
									//Add Product Names To List								 
									$(this).find("prd_name").each(function(){
										var name = $(this).text();				
										 DataList.push(String(name));
									});
									
									//Add Product Codes To List
									$(this).find("prd_code").each(function(){
										var code = $(this).text();				
										 DataList.push(String(code));
									});
									
									//Add Product Descriptions To List
									$(this).find("prd_description").each(function(){
										var description = $(this).text();				
										 DataList.push(String(description));
									});
								});
								
								//Coding And Billing
								$(xml).find('CodingAndBilling Product').each(function()
								 {
									//Add Product Names To List								 
									$(this).find("prd_name").each(function(){
										var name = $(this).text();				
										 DataList.push(String(name));											 
									});
									
									//Add Product Codes To List
									$(this).find("prd_code").each(function(){
										var code = $(this).text();				
										 DataList.push(String(code));
									});
									
									//Add Product Descriptions To List
									$(this).find("prd_description").each(function(){
										var description = $(this).text();				
										 DataList.push(String(description));
									});
								});
								break;
							default:
								alert("No Products Available Currently!");
							break;
						 }	
					}
				});
			}
		});

My original XML as I said before worked just fine but now they want to read off that attribute. Here is the original XML snippet that works:

Old XML SNippet:

<Products>
  <EnvironmentalServices>
    <Product>
      <prd_code>057034</prd_code>
      <prd_name>Practice Guidance for Healthcare Environmental Cleaning, Second Edition (Print Format)</prd_name>
      <prd_description>This publication, prepared by AHE and edited by infection control professionals contains the recommended practices for environmental cleaning in healthcare facilities.</prd_description>
    </Product>
  </EnvironmentalServices>
  <PlanningandStrategy>
    <Product>
      <prd_code>055577</prd_code>
      <prd_name>Operating Room HVAC Setback Strategies  </prd_name>
      <prd_description>Operating room setback is a proven energy-saving strategy for hospitals and ambulatory surgery centers. This paper presents possibilities and question to ask to determine a facility's approach.</prd_description>
    </Product>
  </PlanningandStrategy>
  <FacilitiesManagement>
    <Product>
      <prd_code>055593</prd_code>
      <prd_name>Promoting the Value of the Facility Department to the C-Suite </prd_name>
      <prd_description>This monograph presents strategies facility professionals can use to develop relationships with hospital leaders and show the value of their work. The monograph includes real-world examples of facility professionals who have successfully shown the value of their departments to organizational leaders.</prd_description>
    </Product>
  </FacilitiesManagement>
  <DesignandConstruction>
    <Product>
      <prd_code>055373</prd_code>
      <prd_name>2010 FGI Guidelines for Design and Construction of Health Care Facilities - Book Format</prd_name>
      <prd_description>The Guidelines provides minimum program, space and design needs for clinical and support areas of hospitals, nursing facilities, psychiatric facilities, outpatient, rehabilitation, and long-term care facilities.</prd_description>
    </Product>
  </DesignandConstruction>
</Products>

Keep in mind this is just a snippet. Anyway, the section I need help with is the loop to read the XML doc. So I just need help adjusting this part to read the new XML by the attribute:

//Data Products
								$(xml).find('DataProducts Product').each(function()
								 {
									//Add Product Names To List								 
									$(this).find("prd_name").each(function(){
										var name = $(this).text();				
										 DataList.push(String(name));
									});
									
									//Add Product Codes To List
									$(this).find("prd_code").each(function(){
										var code = $(this).text();				
										 DataList.push(String(code));
									});
									
									//Add Product Descriptions To List
									$(this).find("prd_description").each(function(){
										var description = $(this).text();				
										 DataList.push(String(description));
									});
								});

Edit: Just a guess based on Ryans Post. I cant test right now waiting on Visual Studio to finish repairing its self.

var name = $(xml).getElementsByTagName("PRODUCT");
								 
   for(var j = 0; j < names.length; j++) 
   {
    console.log(names[j].getAttribute("Leadership and Governance"));

    If(names[j].getAttribute("Leadership and Governance") == "Leadership and Governance")
    {										
      //Add Product Names To List								 
      $(this).find("prd_name").each(function(){
        var name = $(this).text();				
         DataList.push(String(name));
      });
    }
 }

edit: I tried this but it did not work. Am I close?

$(xml).find('PRODUCT[Category=Leadership and Governance]').each(function ()
{
    //Add Product Names To List								 
    $(this).find("prd_name").each(function () {
        var name = $(this).text();
        DataList.push(String(name));
    });
});

Here is an example on how to loop through xml in js. stackoverflow.com/questions/49661091/… — user6434796
– user6434796, Commented Aug 27, 2018 at 19:07
Thanks Ryan, that's how I was getting the data to build the data list but if you look at the new XML snippet, they want me to get the attribute and not the Node. I hope I'm saying that right. — mholmes
– mholmes, Commented Aug 27, 2018 at 19:11
I’m viewing this in my phone right now. For some reason the code isn’t formatted in a readable way. I’ll look at this when I get to the office. — user6434796
– user6434796, Commented Aug 27, 2018 at 19:18
Posting a guess, I think I need to review it more to get it: — mholmes
– mholmes, Commented Aug 27, 2018 at 19:29

mholmes · Accepted Answer · 2018-08-27 21:17:16Z

0

I'm going to test this a little further but I think I have a solution:

var Category = "Leadership and Governance";

$(xml).find('PRODUCT[Category="' + Category + '"]').each(function ()
{
    $(this).find("prd_name").each(function () {
        var name = $(this).text();
        console.log(String(name));
        DataList.push(name);
    });
});

answered Aug 27, 2018 at 21:17

mholmes

1872 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

read xml attribute from file into js file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related