Vue：xml2json解析xml

沈宥

发布于 2024-07-11 10:20:49

650

发布于 2024-07-11 10:20:49

文章被收录于专栏：从头开始学习测试开发

背景

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

使用教程

如何安装：

npm包下载链接

【安装命令】 npm i xml2js

【引用】

import xml2js from 'xml2js';

具体实践：

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

<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后】

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

【转换方法调用】

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

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)
            }
});

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-05-11，如有侵权请联系 cloudcommunity@tencent.com 删除

数组