如何使用 Javascript 循环遍历 json 文件中的项目并以 HTML 显示

Question

我有一个基于用户输入创建的 json 文件，json 文件中的项目数可能会有所不同。我想在 Javascript 函数中遍历 json 文件中的所有项目，并在 HTML 脚本中逐行显示每个项目。

示例 JSON 文件如下所示：

data={"What is your name": "Jason", 
       "What is your favorite color": "Blue",
        When is your birtyday?", "Jan 15"}

在 HTML 文件中，单击某个按钮后，json 文件中的每个项目都应显示为问题/答案对。例如“What is your name: 应该出现在第一个“问题”输入框，“Jason”应该出现在第一个“答案”输入框。对于上面的例子，因为有三个项目，所以应该有 6输入 html 标签行，其中 3 行用于问题，另外 3 行用于答案。例如，如果 JSON 文件有 5 个项目，则应该有 5 组问题/答案输入。这是我的 HTML 代码：

<input id="open-btn" class="right-button"></input>
<form class="form-container" action="mailto:?subject=Answers" method="post" enctype="text/plain" >

      <!-- Question & Answer Input Sets: I want to loop this --!>
      <div class="form-group">
           <label for="question1">Question </label>
           <input type="text" id="question1" class="form-input" name="Question1">
      </div>
      <div class="form-group">
           <label for="answer1">Answer </label>
           <input type="text" id="answer1" class="form-input" name="Answer1">
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
</form>

在 Javascript 中，我读取了 json 文件并尝试遍历所有键（问题）和值（答案）并将它们传递给 HTML 中的问题和答案输入。但是我不确定如何在html组件中引入循环。现在，我只有一个 HTML 格式的问题 (id = question1) 和答案 (id=answer1) 输入，它只显示 json 文件中的第一项。

const open = document.getElementById("open-btn");

open.addEventListener('click', () => {
    $.getJSON("../static/data.json", function(data) {
        $.each(data, function (key, value) {
            document.getElementById("question1").value = key
            document.getElementById("answer1").value = value     
        }
            
            )
        
        console.log("Log Data:",data)
    
    });

如何循环遍历 json 文件中的所有项目并逐行显示在 html 中？例如，如果 json 文件中有三个项目，如上例，我想要 6 行输入，其中 3 行用于问题，另外 3 行用于答案。由于 json 文件的长度可能不同，我无法在我的 HTML 文件中创建预定数量的输入集。

或者是否可以读取 json 文件，并将字典作为变量存储在 Javascript 函数中，并在 html 的 for 循环中使用该变量？

Answer 1

您可以创建一个函数来向 HTML 添加元素，例如

function addPair(parent,question,answer,pairId){

    var formGroup = document.createElement("div");
    formGroup.className = "form-group";

    var questionLabel = document.createElement("label");
    questionLabel.htmlFor = "question"+pairId;
    questionLabel.innerText = question;

    var inputText = document.createElement("input");
    inputText.type = "text";
    inputText.id = "question"+pairId;
    inputText.className = "form-input";
    inputText.name = "Answer"+pairId;
    inputText.value = answer;

    formGroup.appendChild(questionLabel);
    formGroup.appendChild(inputText);

    parent.appendChild(formGroup);
}

然后像这样使用它

const open = document.getElementById("open-btn");
var pairs = 0;
var formContainer = document.getElementById("form-container");

open.addEventListener('click', () => {
    $.getJSON("../static/data.json", function(data) {
        $.each(data, function (key, value) {
            addPair(formContainer,key,value,pairs);
            pairs++;
        }

            )

        console.log("Log Data:",data)
    
    });

你可以看到一个例子here

希望这可以帮助！

Answer 2

您需要在 each 方法中创建新元素。

由于您似乎在使用 Jquery，我们可以使用 Jquery 的 appendTo 方法将新元素插入到我们的 HTML 中。为了避免在我们的 HTML 中出现重复的 ID 并将每个 <label> 绑定到每个对应的 <input>，我们使用一个定义为 i 的简单计数器。

data = {
  "What is your name": "Jason",
  "What is your favorite color": "Blue",
  "When is your birtyday?": "Jan 15"
};

const open = document.getElementById("open-btn");

var i = 1;

open.addEventListener('click', () => {
      $("#open-btn").prop('disabled', true);   // to avoid spamming.
      
   // $.getJSON("../static/data.json", function(data) {      
      $.each(data, function(key, value) { 
         $("<div />", { "class":"form-group" })
           .append($("<label />", { for:"question" +i, text:"Question " +i}))
           .append($("<input />", { type: "text", id:"question"+i, value: key }))
           .appendTo(".example-output");
         $("<div />", { "class":"form-group" })
           .append($("<label />", { for:"answer" +i, text:"Answer " +i}))
           .append($("<input />", { type: "text", id:"answer"+i, value: value }))
           .appendTo(".example-output");
        i++;
      })   
   // });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="" id="open-btn">open btn</button>
<form class="form-container" action="mailto:?subject=Answers" method="post" enctype="text/plain">
      <div class="example-output"></div>
      <button type="submit" class="btn btn-primary">Submit</button>
</form>