Tips for linking a dictionary to an Angular tag in HTML

Question

Tips for linking a dictionary to an Angular tag in HTML

Although I have little experience with angularJS, I am struggling to find a clear explanation on how to bind a dictionary with an html tag so that any changes made in the dictionary reflect in the number displayed within the  tag. For instance, if I have multiple dictionaries stored within an array (one for each player)

var players = [{bambu:0, clouds:0, fruits:0}, {bambu:0, clouds:0, fruits:0} , {bambu:0, clouds:0, fruits:0}]

I specifically want to showcase the number associated with "bambu" in a  tag

<p id="player_0_bambu" class="number_of_cards"> </p>

My goal is to update this number dynamically similar to what angular does.

I attempted to achieve this by creating a loop:

while (true){
    for (var r=0; r< num_players;r++){
        for (var c=0; c< colores.length;c++){
            $("#player_"+r+"_"+colores[c]).html(players[r][colores[c]])

        }
    }
}

However, using a while true loop ends up crashing javascript. As a result, I turned towards angular for assistance but I am finding it challenging to grasp.

Your guidance and support are greatly appreciated!

javascript angularjs

Answer 1

Answer №1

It seems strange that angular is mentioned as a possibility, but based on your explanation, you can simply iterate through the array of players and access the values from each object to retrieve  tags.

var players = [{ apples:0, bananas:0, cherries:0 },  {apples:0, bananas:0, cherries:0 } , { apples:0, bananas:0, cherries:0} ]

players.forEach(player => {
  Object.keys(player).forEach(key => {
    const value = player[key];

    document.querySelector(`#player_${value}_${key}`).innerHTML = value;
  });
});

Answer 2

It seems strange that angular is mentioned as a possibility, but based on your explanation, you can simply iterate through the array of players and access the values from each object to retrieve  tags.

var players = [{ apples:0, bananas:0, cherries:0 },  {apples:0, bananas:0, cherries:0 } , { apples:0, bananas:0, cherries:0} ]

players.forEach(player => {
  Object.keys(player).forEach(key => {
    const value = player[key];

    document.querySelector(`#player_${value}_${key}`).innerHTML = value;
  });
});

Tips for linking a dictionary to an Angular <p> tag in HTML

Answer №1

Similar questions

``on click of the back button of the browser, automatically submit the form

The Typescript const assertion translated into Javascript

Using JQuery to dynamically change className based on specific logic conditions

Incorporating and verifying unseen reCAPTCHA

Trouble with replicating highlighted text through jQuery

Learn the method for incorporating a changing name into a radio button with Vue.js

Guide on invoking Objective-C function from JavaScript on iOS

Delayed Passport Session Login

Tips on pairing elements from a ngFor processed list with another list using ngIf

Encountering download issues with the FileTransfer API on Android while using Phonegap

The AngularJS REST service fails to function properly when attempting to load page content through Ajax requests

Please provide clear guidance on the learnyounode assignment number 6 focused on "MAKE IT MODULAR."

Object FlipX using FabricJS

What is the best way to stream an app's data directly to a browser in real time?

How can I fill the data array of arrays using an Angular Table component?

The error message "Unexpected node environment at this time" occurred unexpectedly

The functionality of the typeof operator is not behaving as anticipated

Utilize a single controller for managing two distinct modules within an AngularJS application

Turn on / off Button Using a Different Button

I am noticing that my popover is causing my page to shift when I click it. It is expanding the width of my page more than I would