Changing text in DOM dynamically using Javascript

Question

Am working on an application whereby I have some data in a Javascript object which I have pulled from the backend. Am trying to iterate through the Javascript object and populate in the DOM inside a ul but it aint working, the ul has existing text that I want to change instantly after loop.

Javascript object copied from browser console tab

0: "Mathematics"

1: "English"

2: "Swahili"

3: "Germany"

Logic

$.each(planDetails, function (key, value) { 
    $("#packageBenefits ul li" + key).text(value);
});

Markup to populate data into

<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>

What you are currently saying is target an element that is within an li, that is within an ul, that is within another element with id packageBenefits. No such element exists so you are not updating your text. Rather than looping through the list of values to fill, try properly grabbing the group of li's you want to update and loop through that. — scrappedcola
– scrappedcola, Commented Nov 8, 2019 at 16:05
What is value of plainDetails? Well, $("#packageBenefits ul li" + key) is going to generate something like #packageBenefits ul li1. Maybe you want something like: $("#packageBenefits ul li:nth-child(" + key +")")? — Jax-p
– Jax-p, Commented Nov 8, 2019 at 16:05
Will there be always enough <li> elements (one for every entry in planDetails)? And what is planDetails exactly? An object ({}) or an array ([])? — Andreas
– Andreas, Commented Nov 8, 2019 at 16:06

freefaller · Accepted Answer · 2019-11-08 16:13:52Z

1

You can use the .eq() method in jQuery...

var planDetails = ["Mathematics","English","Swahili","Germany"];
$.each(planDetails, function (key, value) { 
  $("#packageBenefits ul li").eq(key).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>

That will get the nth object, and set the text value accordingly.

A minor improvement on the above would be to get the objects once outside of the $.each, otherwise jQuery has to find all the objects on each individual call of the $.each function, and then get the nth item...

var planDetails = ["Mathematics","English","Swahili","Germany"];
var $lis = $("#packageBenefits ul li");
$.each(planDetails, function (key, value) { 
  $lis.eq(key).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>

If, as @scrappedcola suggests in their comment, you want it to start updating from the 2nd item... it's simply a case of doing +1 on the .eq(key)...

var planDetails = ["Mathematics","English","Swahili","Germany"];
var $lis = $("#packageBenefits ul li");
$.each(planDetails, function (key, value) { 
  $lis.eq(key+1).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>

edited Nov 8, 2019 at 16:13

answered Nov 8, 2019 at 16:07

freefaller

20.1k7 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

scrappedcola Over a year ago

Though op will probably want to increment the index by 1 to bypass the li that contains the span. Also should check that the li that you are grabbing exists before trying to insert or it will error out.

Andreas Over a year ago

@scrappedcola "the ul has existing text that I want to change instantly after loop" - I'm not quite sure why it has to be "after" the loop, but the existing text should be changed.

freefaller Over a year ago

@scrappedcola - I wasn't 100% sure, as their first array entry is already Mathematics... but you might be right. However you're wrong about needing to check the li exists... jquery will still pass back a collection of elements from .eq() and you're just setting .text on an empty set

Joel M. · Accepted Answer · 2019-11-08 16:11:09Z

1

Try this:

var planDetails = { 
  0: "Mathematics",
  1: "English",
  2: "Swahili",
  3: "Germany"
}

$('.card-body li').each(function(index) {
    $(this).html(planDetails[index]);
});

JSFiddle here - https://jsfiddle.net/j67L4tk9/1/

answered Nov 8, 2019 at 16:11

Joel M.

7277 silver badges9 bronze badges

Collectives™ on Stack Overflow

Changing text in DOM dynamically using Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related