Trying to get first item in object list – Javascript

Question is a bit unclear, however I will try and give some answers.

Right now you are getting all the options, in a loop, and each iteration of the loop is overwriting the questionsOption1-element. Giving you the last item, once loop is done.

Get first item in options array:

If you simply want the first element from the options array of the first object in the questions array and set it to the questionsOption1-element it is very simple:

const qOption1 = document.querySelector('.questionsOption1')

const questions = [{
  questionText: "Commonly used data types DO NOT include:",
  options: ["1. strings", "2. booleans", "3. alerts", "4. numbers"],
  answer: "3. alerts",
}];

qOption1.innerHTML = questions[0].options[0];

As you can see, no loops needed.

You can also remove the first item from the array:

const firstOption = questions[0].options.shift();

Get all option from first question:

If you however want all the options for the first question then you would need to loop.

const qOptions = document.querySelector('.questionsOptions');

const questions = [{
    questionText: "Commonly used data types DO NOT include:",
    options: ["1. strings", "2. booleans", "3. alerts", "4. numbers"],
    answer: "3. alerts",
    }];

questions[0].options.forEach((option) => {
  qOptions.innerHTML = qOptions.innerHTML + `<span>${option}</span>`;
});

Note: Changed elements class from questionsOption1 to questionsOptions.

Get all questions and all options:

const qElements = document.querySelector('.questions');

const questions = [{
    questionText: "Commonly used data types DO NOT include:",
    options: ["1. strings", "2. booleans", "3. alerts", "4. numbers"],
    answer: "3. alerts",
    },
    {
    questionText: "Another question:",
    options: ["1. A", "2. B", "3. C", "4. D"],
    answer: "3. C",
    }];

questions.forEach((question, index) => {
  qElements.innerHTML = qElements.innerHTML + `<div>Question ${index+1}</div>`;
  question.options.forEach((option) => {
     qElements.innerHTML = qElements.innerHTML + `<span>${option}</span>`;
  });
});