How to access to nested objects keys

Question

I am trying to get the value from a data file with nested objects.

I want to create a label for each entry that i have under the EN object. So I would like to end up having a "mail" label a "quote" label and a "phone" label.

In the label I want to put the content of tabLabel and tabIcon by accessing it.

With Object.Keys() i can see the strings but when I try to console.log them I get undefined.

I did this function but is not working:

function generateLabel() {
  const keys = Object.keys(TabFormData.EN);
  for (let i = 0; i < keys; i += 1) {
    return `
      <div class="${ID}_tab-form__headerItemWrap">
        <label for="taLabel-here"><i class="tabIcon-here"></i></label>
      </div>
    `;
  }
}

This is the data:

const TabFormData = {
  EN: {
    mail: [
      {
        tabLabel: 'Email Our Team',
        tabIcon: 'fa fa-envelope',
      },
      {
        label: 'First Name',
        type: 'text',
        name: 'name',
        required: true,
        hint: 'Please, provide your Name.',
      },
      {
        label: 'Last Name',
        type: 'text',
        name: 'surname',
        required: true,
        hint: 'Please, provide your Last Name.',
      },
      {
        label: 'Email Address',
        type: 'email',
        name: 'email',
        required: true,
        hint: 'Please, provide a valid email.',
      },
      {
        label: 'Your Message',
        type: 'textarea',
        required: true,
        name: 'message',
        hint: 'Write us a message.',
        rows: 20,
        cols: 50,
      },
      {
        label: 'About You',
        required: true,
        select: [
          'Home use',
          'Business use',
          'Freelance, professional',
        ],
      },
    ],
    quote: [
      {
        tabLabel: 'Request a Quote',
        tabIcon: 'fa fa-file-invoice-dollar',
      },
      {
        label: 'First Name',
        type: 'text',
        name: 'name',
        required: true,
        hint: 'Please, provide your Name.',
      },
      {
        label: 'Last Name',
        type: 'text',
        name: 'surname',
        required: true,
        hint: 'Please, provide your Last Name.',
      },
      {
        label: 'Phone Number',
        type: 'number',
        name: 'telephone',
        required: true,
        hint: 'Please, provide a valid number',
      },
      {
        label: 'Email Address',
        type: 'email',
        name: 'email',
        required: false,
        hint: 'Please, provide a valid email.',
      },
      {
        label: 'Your Message',
        type: 'textarea',
        required: false,
        name: 'message',
        hint: 'Write us a message.',
        rows: 20,
        cols: 50,
      },
      {
        label: 'About You',
        required: true,
        select: [
          'Home use',
          'Business use',
          'Freelance, professional',
        ],
      },
    ],
    call: [
      {
        tabLabel: 'Call Me Back',
        tabIcon: 'fa fa-phone',
      },
      {
        label: 'First Name',
        type: 'text',
        name: 'name',
        required: true,
        hint: 'Please, provide your Name.',
      },
      {
        label: 'Last Name',
        type: 'text',
        name: 'surname',
        required: true,
        hint: 'Please, provide your Last Name.',
      },
      {
        label: 'Phone Number',
        type: 'number',
        name: 'telephone',
        required: true,
        hint: 'Please, provide a valid number',
      },
      {
        label: 'About You',
        required: true,
        select: [
          'Home use',
          'Business use',
          'Freelance, professional',
        ],
      },
    ],
  },
  IT: {

  },
};

Answer 1

Your problem is in the loop.

for (let i = 0; i < keys; i += 1)

In here you're checking if i is less than an array object, which is not what you want. You want to compare i against the number of items in the array.

So that would become this:

for (let i = 0; i < keys.length; i += 1)

Your string literal is also wrong, ID in this case is an undefined variable. I assume you want the name of the key. For this issue it should become:

<div class="${keys[i]}_tab-form__headerItemWrap">

Also, once you return from the for loop, it'll automatically break on the first iteration (meaning you'll always get only one item). What you could do is build your whole string first then return it.

That would make your function become:

function generateLabel() {
  const keys = Object.keys(TabFormData.EN);
  var str = "";
  for (let i = 0; i < keys.length; i += 1) {
    str +=
      `<div class="${keys[i]}_tab-form__headerItemWrap">
        <label for="taLabel-here"><i class="tabIcon-here"></i></label>
      </div>
    `;
  }

  return str;
}

Here's a Fiddle.