Generating HTML content from XML data with the help of JavaScript

Challenge:

Attempting to display one question and its four corresponding answers at a time from an XML file.

JavaScript code:

var xmlDoc, quest, ans, i, n;

xmlDoc = loadXMLDoc("questions.xml");
quest = xmlDoc.getElementsByTagName('main');

document.write("<table border='1'>");

for (i = 0; i < quest.length; i+=1)
{
    document.write("<tr><td>");
    document.write( quest[i].childNodes[0].nodeValue );
    document.write("</td></tr>");

    for(n = 0; n < 4; n++) 
    {
        document.write("<tr><td>");
        document.write( quest[i].childNodes[n].nodeValue );
        document.write("</td></tr>");
    }
}

document.write("</table>");

Expected result:

Display each question along with its four answers below it. Currently, only the questions are being displayed correctly.

The format of the XML file is as follows:

<main>
    <instruction></instruction>
    <solution></solution>
    <solution></solution>
    <solution></solution>
    <solution></solution>
</main>

Answer №1

This is an example of how it could look:

let xmlData, question, answer, index, count;

xmlData = loadXMLDocument("questions.xml");
question = xmlData.getElementsByTagName('main');

document.write("<table border='1'>");

for (index = 0; index < question.length; index+=1)
{
    document.write("<tr><td>");
    document.write( question[index].childNodes[0].nodeValue );
    document.write("</td></tr>");

    for(count = 1; count < 5; count++) // Start at 1 to skip the title.
    {
        document.write("<tr><td>");
        document.write( question[index].childNodes[count].nodeValue );
        document.write("</td></tr>");
    }
}

document.write("</table>");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Engage with React JS arrays of objects

I have a specific object structure that looks like the following: [ { "periodname": "Test", "periodtime": "" }, { "periodname": "", "periodtime&quo ...

Using codeigniter and JQuery, I have developed a unique Javascript function to selectively extract a specific portion of text

I'm currently working with the following syntax: $("#orderbynumber").autocomplete( { source: "get_orders_by_order_number", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var select ...

Are there ways to incorporate a variable within a Regular Expression in Javascript?

I've already checked the Mozilla website and W3schools, but I can't seem to find the solution. var modifyString = function (string1, string2) { if (string2.match(string1)) { string1 = new RegExp(string1); string2 = string2.replac ...

Warning: Node 125008 has reached the maximum number of listeners, indicating a potential memory leak in the EventEmitter

(node:125008) MaxListenersExceededWarning: There may be a memory leak with EventEmitter as 11 ready listeners have been added. Try using emitter.setMaxListeners() to raise the limit Can anyone provide guidance on how to increase the listener event count? ...

I am attempting to create a password validation system without the need for a database, using only a single

Help Needed: Trying to Create a Password Validation Website <script language="Javascript"> function checkPassword(x){ if (x == "HI"){ alert("Just Press Ok to Continue..."); } else { alert("Nope... not gonna happen"); } } ...

Tips for implementing the select all feature in mat-checkbox for Angular 5

Here is the code snippet from my HTML template: <mat-card> <mat-card-content> <h2 class="example-h2">Select Employee</h2> <section class="example-section"> <mat-checkbox [(ngModel)]="ch ...

A guide on utilizing the React Suite range slider in rsuite

Hello there, I recently started working with the UI framework rsuite (React suite) and everything was going smoothly until I tried to use the Range slider component's API. Unfortunately, I am facing some issues with the labels and tooltips not display ...

Even though I have properly set up the express.static() function and ensured that the path is correct, my initial app is still not serving the

Just like the title suggests, I am venturing into building my first node app and have come across an issue. Everything was working perfectly yesterday. However, when I booted up my PC today, I received the error message "Resource interpreted as Stylesheet ...

Transitioning from using sendfile() to sendFile() function within the Express framework

Here is the code snippet I am using: router.get('/image',(req,res,next)=>{ const fileName = "path_to.jpg" res.sendfile(fileName,(err)=>{ if (err) { next(err); } else { console.log('Sent:', fileName); } ...

The persistent redirection issue in Node.js - Middleware

Currently, I am in the process of developing a middleware using node js and express. The main objective of this middleware is to redirect users to a login page if they are not authenticated. Although the redirection to the login page works as intended, th ...

The ClearInterval() function does not take effect instantly

I've implemented a Carousel with an auto-toggle feature using the setInterval() function to switch between tabs every 4 seconds. However, I now need to stop this automatic toggling when a specific tab is clicked. You can find the HTML and jQuery for ...

What could be causing the error message 'Why is 'push' property undefined in React Native?

Within my index.ios.js file, I have the following: renderScene(route, navigator){ return <route.component navigator={navigator} {...route.passProps}/> } as well as render() { return ( <Navigator initialRoute={{name: &a ...

Guide: Highlighting a selected link in Navigation without redirecting the page can be achieved in AngularJS by utilizing

I have a list of links that I want to be able to highlight when clicked without redirecting to the page. Below is the code snippet: HTML <ul class="nav nav-list"> <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title ...

tips for obtaining the highest value among multiple keys within an array

How can I find the maximum value among multiple keys in an array? I previously attempted to find the maximum values for just three keys. getMaxValuefromkeys(values: any[], key1: string, key2: string, key3: string) { var val1 = Math.max.apply(Math, v ...

Asserting types for promises with more than one possible return value

Struggling with type assertions when dealing with multiple promise return types? Check out this simplified code snippet: interface SimpleResponseType { key1: string }; interface SimpleResponseType2 { property1: string property2: number }; inter ...

What techniques can I use to streamline the following?

var cleanWord = word .split(/[^a-z0-9\s.\|]/gi) .join("") .replace(/([~@#$%^&*()_+=`{}\[\]\\:;<>\/ ])+/g, ""); I suspect that I am redundantly using the join function twice here. Is there a way to ...

Turn off the ability to view the content of .css and .js files within the browser

Earlier, I inquired about how to disable file and folder listing and discovered that it can be achieved using a file named .htaccess. To disable folder listing, I entered Options -Indexes in the .htaccess file located in the parent folder. Additionally, to ...

When a login attempt is unsuccessful, I am redirected to /api/auth/error using next-auth

Currently, I am utilizing next-auth version 4.18.8 on my login page for the final project of my Fullstack JS course. It's worth noting that a more recent version is being used compared to what was taught in the course (next-auth v. 3). Upon entering ...

How to insert text into a text input using onKeyPress in react.js

I am looking to simulate a typing effect where the phrase 'Surveillance Capitalism' is inputted letter by letter into a text input field as a user types. However, I encounter an issue when trying to add each individual letter into the input; I re ...

The effectiveness of a promise chain is consistent, even when the return statement is subject to conditions

After reorganizing this sequence, I am perplexed at how it continues to function regardless of a conditional return statement in one of the .then sections: function addList(name) { let listObj = {}; listObj.name = name; return nameExists(name) //returns a ...