Parse a nested XML matrix in JavaScript

Question

I'm to parse the following xml file and print every value in an html file while keeping them organized by their tag, preferably the output would look like a menu format but just help with the parsing logic would be appreciated.

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

SO the out put should be divided by meal type ie dinner, breakfast,dessert. it should also show the price of the item next to the item's name

Answer 1

Take a look at the DOM-Parser: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

You need to use recursion and parse it into a JSON object.

This should help you out agreat deal, it describes the whole process in detail, with code: https://medium.com/@nitinpatel_20236/converting-xml-to-json-using-recursion-7b1df91b42d8