如何从数组html中选择特定数据

Question

我想显示我有如下数组的特定数据

 let questions = [
   {
   numb: 1,
   question: "What does HTML stand for?",
   answer: "Hyper Text Markup Language",
   options: [
   "Hyper Text Preprocessor",
   "Hyper Text Markup Language",
   "Hyper Text Multiple Language",
   "Hyper Tool Multi Language"
   ]
   },
   {
   numb: 2,
   question: "What does CSS stand for?",
   answer: "Cascading Style Sheet",
   options: [
   "Common Style Sheet",
   "Colorful Style Sheet",
   "Computer Style Sheet",
   "Cascading Style Sheet"
   ]
   },
   {
   numb: 3,
   question: "What does PHP stand for?",
   answer: "Hypertext Preprocessor",
   options: [
   "Hypertext Preprocessor",
   "Hypertext Programming",
   "Hypertext Preprogramming",
   "Hometext Preprocessor"
   ]
   },

从此我只想显示所有问题和答案。 喜欢

HTML 代表什么 - 超文本标记语言

CSS 代表什么 - 层叠样式表

PHP 代表什么 - 超文本预处理器

我是这个任何一个帮助打印所有问题答案的菜鸟

Answer 1

如果您只想打印每个对象的问题和答案，您可以使用forEach，如下所示。

let questions = [{
    numb: 1,
    question: "What does HTML stand for?",
    answer: "Hyper Text Markup Language",
    options: [
      "Hyper Text Preprocessor",
      "Hyper Text Markup Language",
      "Hyper Text Multiple Language",
      "Hyper Tool Multi Language"
    ]
  },
  {
    numb: 2,
    question: "What does CSS stand for?",
    answer: "Cascading Style Sheet",
    options: [
      "Common Style Sheet",
      "Colorful Style Sheet",
      "Computer Style Sheet",
      "Cascading Style Sheet"
    ]
  },
  {
    numb: 3,
    question: "What does PHP stand for?",
    answer: "Hypertext Preprocessor",
    options: [
      "Hypertext Preprocessor",
      "Hypertext Programming",
      "Hypertext Preprogramming",
      "Hometext Preprocessor"
    ]
  }
];

questions.forEach(question => console.log(`${question.question} - ${question.answer}`));

至于将其添加到 HTML 部分，您可以创建一个 documentFragment 并通过 appendChild 将段落标签附加到它。从那里只需将片段附加到部分标签。

let questions = [{
    numb: 1,
    question: "What does HTML stand for?",
    answer: "Hyper Text Markup Language",
    options: [
      "Hyper Text Preprocessor",
      "Hyper Text Markup Language",
      "Hyper Text Multiple Language",
      "Hyper Tool Multi Language"
    ]
  },
  {
    numb: 2,
    question: "What does CSS stand for?",
    answer: "Cascading Style Sheet",
    options: [
      "Common Style Sheet",
      "Colorful Style Sheet",
      "Computer Style Sheet",
      "Cascading Style Sheet"
    ]
  },
  {
    numb: 3,
    question: "What does PHP stand for?",
    answer: "Hypertext Preprocessor",
    options: [
      "Hypertext Preprocessor",
      "Hypertext Programming",
      "Hypertext Preprogramming",
      "Hometext Preprocessor"
    ]
  }
];

const section = document.getElementById('section');

const fragment = document.createDocumentFragment();

questions.forEach(question => {
  const paragraph = document.createElement('p');
  
  paragraph.innerText = `${question.question} - ${question.answer}`;
  
  fragment.appendChild(paragraph);
});

section.appendChild(fragment);

<section id="section"></section>