XMLから特定の要素と値を抽出する方法

Question

前提・実現したいこと

・送料計算のWebAPIを利用して送料を取得したい
・vuex、axios、javascriptにより実現したい
・APIのリクエスト／レスポンスは、XML形式

質問

axios.postにより、以下のようなレスポンスが得られる。
<Price>6.65</Price>の値6.65を抽出したい。
mutationsかactionsで抽出ロジックを書く想定。
<Price>要素は複数あり、安い（数値が小さい）ものから3つ抽出する。

JSONに変換（convert.xml2json関数）して配列から要素を指定する等、色々とググってトライしてみたが抽出に至らず。
ベストプラクティスであろうロジックがお解りでしたらご教授頂きたく思ってます。
よろしくお願いします。

<?xml version="1.0" encoding="UTF-8"?> <RateV4Response>...(途中省略)...<Price>6.65</Price>...<Price>3.55</Price>...(途中省略)...</RateV4Response>

Answer 1

javascriptにより実現したい

レスポンスは、XML形式

1. DOMParser で XMLDocument オブジェクトにする。
2. document.evalute() で XPath を指定して目的の要素を得る。
3. XPathResult の結果から必要な演算を行い、画面表示などに応用する。

xpathExpression（XPath式） は XPathで検索 してください。

XPath が分からない場合は、XMLDocument に対して querySelector() など馴染み深いDOM操作ができます。

Comments

[tbnkin]

すばらしい、ありがとうございます！

XPathをトライしてみたが、うまくできず。。。
getElementsByTagNameを使い、
ひとまず特定したPriceタグとその値の取得に成功しました。

state: {
shipping: [],
},

mutations: {
setShipping: function(state, shipping) {
var DOMParser = require('xmldom').DOMParser;
let xml = shipping
let parser = new DOMParser();
let doc = parser.parseFromString(xml, "text/xml");
var elm = doc.getElementsByTagName("Price")[0];
state.shipping = elm.textContent;
}
},

[AkitoshiManabe]

XPath について、チュートリアルをまとめたサイトもあります。
https://www.w3schools.com/xml/xpath_intro.asp (英語)

[tbnkin]

Xpathチュートリアル
遅くなりましたが確認しました。
今後の知見とします！

いろいろと情報のご提供
ありがとうございます。