Utilizing a for loop in conjunction with JSON data

Can someone help me with this issue? I can only see Jimmy Cricket's name displayed, but I want to see all the names in li tags. Any assistance would be greatly appreciated.

<ul id="members"></ul>
<script>
var teammembers = [
{"name":"John Doe", "profile":"/img/profile/user1.jpg", "position":"President", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caafa7aba3a68aafb2aba7baa6afe4a9a5a7">[email protected]</a>", "phone":"242-abcd"},
{"name":"James Bond", "profile":"/img/profile/user2.jpg", "position":"Vice President", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a898989fe8cdd0c9c5d8c4cd86cbc7c5">[email protected]</a>", "phone":"242-0007"},
{"name":"Jimmy Cricket", "profile":"/img/profile/user3.jpg", "position":"Vice Cricket", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30534259535b5544705548515d405c551e535f5d">[email protected]</a>", "phone":"242-wxyz"}
];

for (var i = 0; i < teammembers.length; i++) { 
    document.getElementById("members").innerHTML = "<li>" + teammembers[i].name; + "</li>"
}
</script>
javascriptjsonfor-loop

Answer №1

The symbol = in this context is used to replace the innerHTML during each iteration. This results in displaying only the last value of the array.

To rectify this issue, you can switch the symbol to +=. The corrected line of code would look like this:

 document.getElementById("members").innerHTML += "<li>" + teammembers[i].name; + "</li>"

By using +=, the content will be appended to the existing innerHTML.

Answer №2

Instead of replacing the innerHTML, you should append to it. For instance, avoid doing this:

document.getElementById("members").innerHTML = "<li>" + teammembers[i].name; + "</li>"

try this instead (use += instead of =):

document.getElementById("members").innerHTML += "<li>" + teammembers[i].name; + "</li>"

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

Using the googleapis library within HTML is not permitted

I have been attempting to execute a simple function (uploadFile(test.txt)) within an HTML file, but I am encountering issues as my app.js and Google APIs are not being recognized or called. Node.js is throwing this error: Uncaught ReferenceError: uploadFi ...

javascripthtmlnode.jsrequirejs

JSON object containing elements with dash (-) character in their names

While I am in the process of parsing a `json` object, I encountered an element labeled as `data-config`. Here's an example: var video = data.element.data-config; Every time I attempt to parse this specific element, an error pops up: ReferenceError ...

javascriptjqueryajaxjsonjquery-mobile

Currently, I am compiling a list of tasks that need to be completed, but I am encountering a dilemma that is proving difficult to resolve

Recently delved into the world of Javascript and encountered a roadblock that I can't seem to overcome. Here's the snippet of code causing me trouble: add = document.getElementById("add"); add.addEventListener("click", () => { console.log("Ple ...

javascripthtmlcssarrays

modifying the placeholder font and relocating chips/tags beneath the search bar

I'm encountering some challenges with material-ui that I could use assistance with. Firstly, is there a method to have the tags/chips displayed below the search bar instead of above it? Additionally, I've been attempting to italicize and adjust ...

javascriptreactjsmaterial-uiautocomplete

Importing GeoJSON data into Meteor's Leaflet

Recently diving into Meteor, I am on a mission to create my own customized version of this impressive example from leaflet incorporated into Meteor: Interactive Choropleth Map The implementation requires the use of this GeoJson Data file: us-states The o ...

javascriptjsonmeteorleafletgeojson

What mistakes am I making in this PHP code as I try to work with the select option?

Currently, I am developing a form that involves selecting values. If the user chooses 'yes', I want to display a text box section. However, the code below is not functioning as expected. <select id="gap" name="gap" onclick="gap_textbox();"> ...

javascriptphpjqueryajax

Create an express server that can stream mp3 files with the functionality to easily skip forward or rewind

My express server is set up to either download or stream an mp3 file, and here is the code: const express = require('express'); const fs = require('fs'); const app = express(); app.use('/mp3', express.static(__dirname + &apo ...

javascriptnode.jsexpressfilesystems

Sending out a command does not equate to establishing Redux with an outcome

I've been grappling with this issue for the past 18 hours and I'm at a loss to figure out what's causing the problem. My redux setup is working smoothly as it dispatches actions and receives state correctly for other components. However, in ...

javascriptreactjsredux

Transferring a Query between Domains with the Help of JavaScript

It is necessary to develop a function that generates a query based on the user's input of "Test" in an INPUT on Site A (SiteA.com) and then redirects to Site B within the same window, passing along the query (SiteB.com/search.aspx?k=test). Code snipp ...

javascript

"Exploring the power of Angular's translation capabilities paired with

I'm currently working on translating a multistep form using Angular Translate and routing with ui-router. Everything seems to be functioning properly except for one issue. Below is the snippet of my code: Translation Setup: .config(function ($t ...

javascriptjsonangularjsangular-translate

JavaScript ES6 array method for generating an object from an array

I wish to transform the following array: [ { event: "LIB", block_calendar: "YES", obs: "Lorem Ipsum", status: "Block", }, { event: "LIB" block_calendar: "YES" o ...

javascriptvue.jsecmascript-6

Angular constantly looping due to $watchCollection being triggered repeatedly

I am interested in monitoring the changes of an object, referred to as x, specifically its properties which are checkboxes. When a user checks a box, it alters the checked property (prop1) to 1. Each property contains certain content, and when enabled, it ...

javascriptangularjswatch

Creating a powerful Master/Detail component using JSON data and incorporating a customizable template and function

Recently, I've delved into the realm of Knockout and for the most part, everything has been smooth sailing. However, there is one issue that has me scratching my head, and I was hoping to find some assistance here. My challenge involves creating a Kno ...

jqueryjsonknockout.js

Issue encountered when exporting with node and mongoose

After creating some schema and exporting the model, here is the code: var mongoose = require('mongoose'); var specSchema = new mongoose.Schema({ name: String, description:String }); var qualSchema = new mongoose.Schema({ name: Str ...

javascriptnode.jsmongodbexpressmongoose

Vue3 - Utilizing a method to dynamically alter an input property

Currently, I am in the process of developing a Vue application that incorporates a map feature. The main functionality involves determining whether a given position on the map is over water or land. If the position is over water, I want to iterate through ...

javascriptvue.jsvue-componentvuejs3

Issue with referencing Asmx web service

I am struggling to properly reference my web service method with JavaScript on my client page. I keep receiving an error message that says "CalendarHandler is not defined". <%@ WebService Language="C#" CodeBehind="~/App_Code/CalendarHandler.cs" Class ...

javascriptasp.netajaxweb-servicesasmx

What is the process for incorporating Angular.js with a live messaging platform such as Pusher or PubNub?

Can Pusher or PubNub be implemented as an Angular service? Anyone have any examples of code for this kind of integration? ...

javascriptangularjspusherpubnub

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

javascriptcssangularsassangular-cli

The JSON data is not showing the ID information

I am currently working on a project where I need to pull data from a JSON file and display it on a website. However, I am facing an issue where the ID is not being displayed for some reason. Can someone provide guidance on how to fix this? function getJ ...

phpjsonwordpress

When using react, it is not possible to have a <span> element as a child of a <

I designed a custom select dropdown feature for use in a redux-form within a react-redux application. The dropdown functions well, with no performance issues, but I am encountering a warning in the browser. Warning: validateDOMNesting(...): <span> c ...

javascriptreactjsfrontendredux