首页 > 解决方案 > 在 JavaScript 中解析嵌套的 XML 矩阵

问题描述

我将解析以下 xml 文件并打印 html 文件中的每个值,同时让它们按标签进行组织,最好输出看起来像菜单格式,但仅对解析逻辑有帮助将不胜感激。

<MENU>
<BREAKFAST>
<APPETIZER>
<NAME>Fruit Bowl</NAME>
<PRICE>10.90</PRICE>
</APPETIZER>
<SALAD>
<NAME>Caeser SALAD</NAME>
<PRICE>3.90</PRICE>
</SALAD>
<SOUP>
<NAME>Chicken Noodle</NAME>
<PRICE>5.90</PRICE>
</SOUP>
<ANTREE>
<NAME>Omelet</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Scrambled Eggs</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<DESSERT>
<NAME>Apple Pie</NAME>
<PRICE>7.90</PRICE>
</DESSERT>
</BREAKFAST>
<BRUNCH>
<APPETIZER>
<NAME>Fruit Bowl</NAME>
<PRICE>10.90</PRICE>
</APPETIZER>
<APPETIZER>
<NAME>EggPlant Frits</NAME>
<PRICE>10.90</PRICE>
</APPETIZER>
<SALAD>
<NAME>House Salad</NAME>
<PRICE>3.90</PRICE>
</SALAD>
<SOUP>
<NAME>Chicken Noodle</NAME>
<PRICE>5.90</PRICE>
</SOUP>
<ANTREE>
<NAME>French Toast</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Omelet</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Scrambled Eggs</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Hamburg</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<DESSERT>
<NAME>Apple Pie</NAME>
<PRICE>7.90</PRICE>
</DESSERT>
</BRUNCH>
<LUNCH>
<APPETIZER>
<NAME>Calamari</NAME>
<PRICE>10.90</PRICE>
</APPETIZER>
<SALAD>
Caeser Salad
<PRICE>3.90</PRICE>
</SALAD>
<SALAD>
<NAME>Arugula Salad</NAME>
<PRICE>3.90</PRICE>
</SALAD>
<SOUP>
<NAME>Chicken Noodle</NAME>
<PRICE>5.90</PRICE>
</SOUP>
<SOUP>
<NAME>Italian Wedding Soup</NAME>
<PRICE>5.90</PRICE>
</SOUP>
<ANTREE>
<NAME>Steak</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Hamburg</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Angel Hair Pasta</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<DESSERT>
<NAME>Tiramisu</NAME>
<PRICE>7.90</PRICE>
</DESSERT>
</LUNCH>
<DINNER>
<APPETIZER>
<NAME>Calamari</NAME>
<PRICE>10.90</PRICE>
</APPETIZER>
<APPETIZER>
<NAME>EggPlant Frits</NAME>
<PRICE>10.90</PRICE>
</APPETIZER>
<SALAD>
House Salad
<PRICE>3.90</PRICE>
</SALAD>
<SALAD>
<NAME>Caeser Salad</NAME>
<PRICE>3.90</PRICE>
</SALAD>
<SOUP>
Chicken Noodle
<PRICE>5.90</PRICE>
</SOUP>
<SOUP>
<NAME>Italian Wedding Soup</NAME>
<PRICE>5.90</PRICE>
</SOUP>
<SOUP>
<NAME>Roasted Patato</NAME>
<PRICE>5.90</PRICE>
</SOUP>
<ANTREE>
<NAME>Steak</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Hamburg</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Angel Hair Pasta</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<ANTREE>
<NAME>Roasted Duck</NAME>
<PRICE>20.90</PRICE>
</ANTREE>
<DESSERT>
<NAME>Apple Pie</NAME>
<PRICE>7.90</PRICE>
</DESSERT>
<DESSERT>
<NAME>Tiramisu</NAME>
<PRICE>7.90</PRICE>
</DESSERT>
<DESSERT>
<NAME>Creme Brule</NAME>
<PRICE>7.90</PRICE>
</DESSERT>
</DINNER>
<DRINKS>
<BEER>
<NAME>Bud Weiser</NAME>
<PRICE>5.90</PRICE>
</BEER>
<BEER>
<NAME>Hefe Weissbier</NAME>
<PRICE>6.90</PRICE>
</BEER>
<WINE>
<NAME>Cabernet Sauvignon</NAME>
<FROM>Napa Valley</FROM>
<PRICE>15.90</PRICE>
</WINE>
<WINE>
<NAME>Margaux</NAME>
<PRICE>50.90</PRICE>
</WINE>
<WINE>
<NAME>Pinot Noir</NAME>
<FROM>Napa Valley</FROM>
<PRICE>12.90</PRICE>
</WINE>
<WINE>
<NAME>Chianti</NAME>
<PRICE>10.90</PRICE>
</WINE>
<COFFEE>
<NAME>Star Bucks</NAME>
<PRICE>3.90</PRICE>
</COFFEE>
<SODA>
Coca Cola
<PRICE>3.90</PRICE>
</SODA>
<SODA>
Sprite
<PRICE>3.90</PRICE>
</SODA>
</DRINKS>
</MENU>

所以输出应该按膳食类型来划分,即晚餐、早餐、甜点。它还应该在商品名称旁边显示商品的价格

标签: javascripthtmlxml

解决方案


看看 DOM-Parser:https ://developer.mozilla.org/en-US/docs/Web/API/DOMParser

您需要使用递归并将其解析为 JSON 对象。

这应该可以帮助您解决很多问题,它详细描述了整个过程,代码:https ://medium.com/@nitinpatel_20236/converting-xml-to-json-using-recursion-7b1df91b42d8


推荐阅读