The JS Map displays only the final outcome

Could someone help me understand why the map function is only displaying the last result instead of all?

    let err = {
      email: false,
      password: false,
      surname: false,
      lastname: false,
      firma: false,
      url: false
    };

    Object.keys(err).map(el => {
       error.innerText = el;
     });

When I use console.log, I can see all the results...

Answer №1

With each iteration of the loop, the error.innerText is altered. Therefore, in the final loop, it will be assigned to the last key. I recommend utilizing += instead.

Object.keys(err).map(el => {
       error.innerText += el;
     });

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

Tips for sending a state into the gtm.js function?

As an intern at a startup, I am the sole front-end developer responsible for coding a website in Next.js. My boss has requested that I incorporate Google Tag Manager into the project. Following the example provided by Next on their GitHub page, I have succ ...

Error 404 encountered while trying to access a website with parameters using Vue.js

Currently, I am in the process of building a website using VueJS and recently discovered how to use url parameters. Everything was working perfectly on my local machine - I could easily navigate to different pages by including parameters in the URL. For e ...

Tips for determining the height of the entire webpage using jQuery

I attempted the following code: $(window).height(); $("#content").height(); However, it did not provide an accurate value. ...

Selecting a date in Jade's date picker

I'm currently facing an issue with getting a datepicker to function properly using Jade in a node.js and express framework. Within index.jade, I am loading the necessary javascript files like this: link(type='text/css', href='css/ui-l ...

Updating and showing a variable in a PHP file using JavaScript within an HTML webpage

My goal is to establish a variable in a PHP file on my server named "likes." Subsequently, I wish to incorporate a like button on my HTML webpage that, when clicked, will utilize JavaScript to modify the "likes" variable in the PHP file and increase it by ...

Using Vue Js to bind two values to an href attribute in a tag

As a Vue.js beginner, I am encountering an issue where I need to update two values simultaneously during rendering. <ul class="category-list"> <li v-for="category in categories"> <a v-bind:href="location/category.slug/all" v-tex ...

Sending multiple JSON objects in a Flask application

Exploring the world of web development, I am attempting to understand if it is feasible to generate two posts from a single request.json object using curl X POST. For instance, when entering the following command: curl -i -H "Content-Type: application/jso ...

Instruct npm to remove dependencies that are no longer necessary

After adding a few libraries to my package.json file, I realized that they are no longer needed. Is there a command line parameter for npm install that can be used to remove unnecessary packages from node_modules directory that are not in package.json anym ...

Exploring the Differences: innerHTML versus appendChild for Loading Scripts

Struggling to dynamically load scripts onto the DOM? function addScript(fileName) { document.body.innerHTML += `<script src='components/${fileName}/${fileName}.js'></script>` } addScript('message-interface') I prefer th ...

Nested Ajax request fails and triggers a full page reload

My goal is to search for product information and images using a product code input on index.php. The query runs in open_first.php via an ajax post request, which works perfectly. open_first.php displays images that can be selected by clicking on them. How ...

When you call setTimeout from a static function, it does not get executed

Having a problem with starting a timer in my utility typescript class. The static function initTimer() uses setTimeout but when called from a react component, the timer doesn't start. StyleWrapper.tsx const StyleWrapper: FC = (props) => { cons ...

Refresh choices for the user interface selection menu

I've successfully mastered the art of redefining options for Webix ui.richselect/ui.combo. The technique involves: richselect.getList().clearAll(); richselect.getList().parse(options_data) Now, I'm facing a challenge with changing options fo ...

Express is utilizing HTML entities for formatting JSON data

We are encountering a problem with our NodeJS application which is based on express and body-parser. The issue arises when certain characters in the REST requests, sent in JSON format, get HTML/XML escaped unexpectedly. We suspect that something within eit ...

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

I have set up a server that receives data from a gaze sensor, as well as an HTTP server that serves an HTML page. I am looking for a way to dynamically highlight elements in the HTML based on the incoming data. Any suggestions on what resources or techniqu ...

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

My goal is to create a dropdown menu populated with a list of items, and when a product is selected, its price should automatically appear in the quantity field. <ion-item> <ion-label>Item</ion-label> <ion-select (ionChange)="getP ...

Performing a jQuery ajax POST request to log users in

I am currently facing a challenge with my .ajax request being made through a form for the purpose of logging in. Upon submitting my form, I am not receiving any response from either the success or error functions. Interestingly, even when I inserted an a ...

Unlocking the Potential of Checkbox Values in AngularJS

I am attempting to extract data from a $rootScope object that has been linked to the checkboxes. HTML: <tr ng-repeat="system_history in SystemHistoryResponse.system_history"> <td><input type="checkbox" ng-model="versionValues[system_histor ...

Checking two promises in AngularJS to ensure they have both returned successfully

I am faced with a scenario where I need to execute actions as each promise returns individually, and perform another action once both promises have returned successfully. promise1.then(function() { // do something }) promise2.then(function() { // do some ...

Using Dynamic Jinja HTML to Select Elements Dynamically

I have a unique system where forms are dynamically created based on values from a dictionary. Each form is assigned an ID corresponding to the key value and initially hidden. <div id="subforms" style="display: none" > {%for k, v in options.items() ...

What steps can be taken to enhance the efficiency of this complex nested asynchronous loop?

The issue at hand involves an array of objects structured like this: let myObj = [ {'db1':['doc1','doc2','doc3']}, {'db2':['doc4','doc5']}, {'db3':['doc7','doc8 ...