CODEWITHSUNDEEP
javascriptarrays
john c. j.
john c. j.

Reputation: 1175

forEach over array of arrays

Edited

Sorry if the title is not clear enough. I really don't know how to describe what I ask for without an example.

The code is below.

Is it possible to fix this code so that I can use "normal" text for innerHTML? That is, labels should be as follows:

Dislike
Neither like nor dislike
Like


const negative_attitude = ['dislike', 'Dislike'];
const neutral_attitude = ['neither-nor', 'Neither like nor dislike'];
const positive_attitude = ['like', 'Like'];

const radio_buttons = [negative_attitude[0], neutral_attitude[0], positive_attitude[0]];
const checked = 'neither-nor'

radio_buttons.forEach((radioButton) => {
  const input = document.createElement('input');
  input.type = 'radio';
  input.id = radioButton.toLowerCase();
  input.name = 'attitude';
  input.value = radioButton.toLowerCase();

  if (radioButton.localeCompare(checked) === 0) {
    input.checked = true;
  }

  const label = document.createElement('label');
  label.innerHTML = radioButton; // How to fix?
  label.htmlFor = radioButton.toLowerCase();

  document.body.appendChild(input);
  document.body.appendChild(label);
});

Upvotes: 0

Views: 76

Answers (3)

gen_Eric
gen_Eric

Reputation: 227220

The problem is that your radio_buttons is not an array of arrays. It's an array of strings. When you use [0], you are getting the 0th (starting) element of the array, so you've just added 3 strings to radio_buttons.

You need to actually make an array of arrays, by adding the entire arrays to radio_buttons. Then when you loop over it, each element will have 2 elements ([0] and [1]) for you to work with.

const negative_attitude = ['dislike', 'Dislike'];
const neutral_attitude = ['neither-nor', 'Neither like nor dislike'];
const positive_attitude = ['like', 'Like'];

const radio_buttons = [negative_attitude, neutral_attitude, positive_attitude];
const checked = 'neither-nor'

radio_buttons.forEach((radioButton) => {
  const id = radioButton[0];
  const lbl = radioButton[1];

  const input = document.createElement('input');  
  input.type = 'radio';
  input.id = id;
  input.name = 'attitude';
  input.value = id;

  if (id.localeCompare(checked) === 0) {
    input.checked = true;
  }

  const label = document.createElement('label');
  label.innerHTML = lbl;
  label.htmlFor = id;

  document.body.appendChild(input);
  document.body.appendChild(label);
});

Upvotes: 1

jburtondev
jburtondev

Reputation: 3253

1. No need to iterate over the arrays in this case as radio_buttons actually outputs as a simple array of strings containing the following:

['dislike', 'neither-nor', 'like']

You don't actually have an array of arrays in other words.

2. Here is what you need with different indexes on radio_buttons to get what you need:

const radio_buttons = [negative_attitude[1], neutral_attitude[1], positive_attitude[1]];

3. However, as mentioned in the comments, you might as well just hard code an array, because it makes no difference and is simpler:

const radio_buttons = ['dislike', 'neither-nor', 'like']

Upvotes: 0

LowkeyCode
LowkeyCode

Reputation: 21

radio_buttons = [negative_attitude[1], neutral_attitude[1], positive_attitude[1]];
console.log(radio_buttons);

Is this what you want as i made the code as far i understood what you wanted

Upvotes: 1

Related Questions