Vue：xml2json解析xml

背景

• 接口返回数据格式为xml，但结构复杂，解析过于繁琐，若转换为JSON，解析省时省力

使用教程

如何安装：

npm包下载链接

【安装命令】 npm i xml2js

【引用】

代码语言：javascript复制

import xml2js from 'xml2js';

具体实践：

如果xml具体内容既包含数组，又包含字典，可以看下解析后的对比： 【原始xml数据】

代码语言：javascript复制

<Result>
    <Message>可以预定</Message>
    <CreateOrderValidateKey></CreateOrderValidateKey>
    <ResultCode>0</ResultCode>
    <InventoryPrice>[{&#34;date&#34;:&#34;2024-05-10&#34;,&#34;price&#34;:37700,&#34;quota&#34;:9,&#34;promotionPrice&#34;:18850,&#34;dayPriceDetailList&#34;:null}]</InventoryPrice>
    <CurrencyCode></CurrencyCode>
</Result>

【解析为JSON后】

代码语言：javascript复制

{
    "Result": {
        "Message": [
            "可以预定"
        ],
        "CreateOrderValidateKey": [
            ""
        ],
        "ResultCode": [
            "0"
        ],
        "InventoryPrice": [
            "[{"date":"2024-05-11","price":37700,"quota":3,"promotionPrice":18850,"dayPriceDetailList":null}]"
        ],
        "CurrencyCode": [
            ""
        ]
    }
}

【转换方法调用】

代码语言：javascript复制

xml2js.parseString(res.data, (err, result) => {
            let price_info = result.Result.InventoryPrice[0]

            for (let i = 0; i < price_info.length; i  ) {
              let price = price_info[i].price
            }
});

【Tips】 上面的转换方法里，有关于price参数的解析，这个其实无法解析成功的，因为InventoryPrice[0]的value其实是字符串，无法按照数组去解析，这里必须再转换一次，将字符串转为为JSON

代码语言：javascript复制

xml2js.parseString(res.data, (err, result) => {
            console.log(result)
            let price_info = JSON.parse(result.Result.InventoryPrice[0]);

            for (let i = 0; i < price_info.length; i  ) {
              let price = price_info[i].price
              vm.total_price = vm.paid_price = vm.total_price   (price / 100)
            }
});

数组 字符串 xml 接口 数据

0 人点赞