Js讀取XML文件爲List結構

時間 2019-11-10

原文原文鏈接

習慣了C#的List集合,對於Javascript沒有list 極爲不舒服,在一個利用Js讀取XML文件的Demo中,決定本身構建List對象,將數據存入List.html

第一步,Js讀取XML文件知識node

XML:可擴展標記語言,經常使用於互聯網數據傳輸.利用JS讀取XML的文章有很是多,這裏不一一介紹,本文主要採用Jquery 讀取Xml文件.(參考 https://www.cnblogs.com/huacw/archive/2011/03/24/1994074.html).讀取文件須要注意瀏覽器兼容問題,利用谷歌瀏覽器讀取文件須要設置容許訪問本地文件.火狐與Edge,IE瀏覽器均能讀取本地文件.ajax

第二步: 分析XML結構數組

本文以商品結構爲例,XML文件結果以下圖所示.XML 根節點爲CATALOG,子節點爲FurnitureType(傢俱類型),傢俱類型子節點爲Goods 瀏覽器

第二步: 構建Goods對象,List對象測試

Goodsthis

//產品類
function Goods(){

    this.type = type;
    this.product = product;
    this.brand = brand;
    this.price=price;
    this.productDetails=productDetails;
    this.materies=materies;
    this.care=care;
    this.pictures=pictures;
    
}

function  type(type){
    return  type;
}
function product(product)
{
    return product;
}
function brand(brand){
    return brand;
}
function price(price)
{
    return price;
}
function productDetails(details){
    return details;
}
function  materies(meteriesArray){
    return meteriesArray;
}
function care(care){
    return  care;
}
function pictures(pictureArray){
    return pictureArray;
}

　　List對象url

/*
 * List 大小可變數組
 */
function List() {
    this.List = new Array();
};

/**
 * 將指定的元素添加到此列表的尾部。
 * @param object 指定的元素
 */
List.prototype.add = function(object) {
    //this.List[this.List.length] = object;
this.List.push(object);
};

/**
 * 將List添加到此列表的尾部。
 * @param Listgoods 一個列表
 */
List.prototype.addAll = function(Listgoods) {
    this.List = this.List.concat(Listgoods.List);
};

/**
 *  返回此列表中指定位置上的元素。
 * @param index 指定位置
 * @return 此位置的元素
 */
List.prototype.get = function(index) {
    return this.List[index];
};

/**
*  獲取元素在數組中的座標,不存在則返回-1
* @return true or false
*/
List.prototype.getdataIndex = function(object) {    
 var i = 0;    
 for(; i < this.List.length; i++) {
     if( this.List[i] === object) {
        return i;     
     }            
 } 
 return -1;
};


/**
 * 移除此列表中指定位置上的元素。
 * @param index 指定位置
 * @return 此位置的元素
 */
List.prototype.removeIndex = function(index) {
    var object = this.List[index];
    this.List.splice(index, 1);    
    return object;
};

/**
 * 移除此列表中指定元素。
 * @param object 指定元素
 * @return 此位置的元素
 */
List.prototype.remove = function(object) {
    var i = this.getdataIndex(object);
    
    if(i==-1) {
        return null;
    } else {
        return this.removeIndex(i);
    }
};

/**
 * 移除此列表中的全部元素。
 */
List.prototype.clear = function() {
    this.List.splice(0, this.List.length);
};

/**
 * 返回此列表中的元素數。
 * @return 元素數量
 */
List.prototype.size = function() {
    return this.List.length;
};

/**
 * 返回列表中指定的 start（包括）和 end（不包括）之間列表。
 * @param start 開始位置
 * @param end   結束位置
 * @return  新的列表
 */
List.prototype.subList = function(start, end) {    
    var List = new List();
    List.List = this.List.slice(start, end);
    return List;
};

/**
 *  若是列表不包含元素，則返回 true。
 * @return true or false
 */
List.prototype.isEmpty = function() {
    return this.List.length == 0;
};
/**
 *  根據價格對商品列表進行排序。
 * @return 排序後列表
 */
List.prototype.SortByPrice=function(){    
    var length= this.List.length;
    for(var j=0;j< length-1;j++){
        //兩兩比較，若是前一個比後一個大，則交換位置。
           for(var i=0;i<length-1-j;i++){
                if(this.List[i].price>this.List[i+1].price){
                    var temp = this.List[i];
                    this.List[i] = this.List[i+1];
                    this.List[i+1] = temp;
                }
            } 
        }
   
}
/**
 * 
 * @param type 數據類型
 * @return 排序後列表
 */
List.prototype.GetDataByType=function(type){
    var NewList = new List();
    for(var i=0;i<this.List.length;i++){
       var object=this.List[i] ;
       if(object.type==type){
        NewList.add(object)
       }    
    }
    return NewList;
}

/**
 * 
 * @param type 數據類型
 * @return 數據類型的 品牌列表
 */
List.prototype.GetBrandsByType=function(type){
    var dataList =this.GetDataByType(type);
    var brandList=new List();
    for(var i=0;i<dataList.List.length;i++){
        var brand=dataList.List[i].brand;
       if(brandList.getdataIndex(brand)==-1){
         brandList.add(brand);
       }          
    }
    return brandList;
}

　　第三步;讀取文件prototype

本文利用Jquery讀取XML文件,需導入Jquery.讀取部分代碼:調試

var AllGoodsList = new List();//全部數據

//讀取文件 獲取數據
function GetXml() {
    $.ajax({
        url: 'file/data.xml',
        dataType: 'xml',
        success: function (data) {
            //獲取xml數據       
            isLoadDataOK= GetData(data);
           
          
        }
    });

}
//讀取xml數據存入list集合
function GetData(data) {    
        var  nowGoodsType;
        $(data).find("Type").each(function (i, Type) {
            var type=$(this).attr("name");
            if(type=="Categories"){
                $(Type).find("GoodsType").each(function (i, GoodsType) {
                    nowGoodsType = $(this).attr("name");
                   $(GoodsType).find("Goods").each(function (j) {
           
                       var base = $(this).children("Base");
                       var product = base.children("Product").text();
                       var brand = base.children("Brand").text();
                       var price = base.children("Price").text();
                       var productDetails = $(this).children("ProductDetails").text();
                       var material = new Array();
                       var materials = $(this).children("Material");
                       var materialnodes = materials.children("item");
                       for (var i = 0; i < materialnodes.length; i++) {
                           var item = materialnodes[i];
                           var itemvalue = item.textContent;
                           material.push(itemvalue)
                       }
                       var care = $(this).children("Care").text();
                       var pictures = new Array();
                       var pictures = $(this).children("Picture");
                       var picturenodes = pictures.children("item")
                       for (var i = 0; i < picturenodes.length; i++) {
                           var item = picturenodes[i];
                           var itemvalue = item.textContent;
                           pictures.push(itemvalue)
                       }
                       var goods = new Goods();
                       goods.type = nowGoodsType;
                       goods.product = product;
                       goods.brand = brand;
                       goods.price = price;
                       goods.productDetails = productDetails;
                       goods.materies = material;
                       goods.care = care;
                       goods.pictures = pictures;
                       var p1=price.replace("A","");
                       var p2=p1.replace("U","");
                       var p3=p2.replace("$","");
                       goods.thePrice=p3;
                       AllGoodsList.add(goods);
                       
                   })
               })

            }
        
       
    }
   )
}

　第四步啓動測試:

啓動火狐瀏覽器,讀取文件後,調試查看數據.結果以下.代表數據已經徹底讀取成功.