Question

当我单击按钮时，我希望能够用JSON内容填充div。我只希望对象数组中的1个对象一次填充div（单击不同的按钮时，数组中的不同对象将填充div）。

我从基线代码开始，一直到此为止。我已经加载了JSON，但是我不知道如何创建通过JSON数组中的对象运行的代码来查找要填充div的对象。（在此示例中，我希望div保留ChapterName的内容）

$(document).ready(function() {
  $("#button1").click(function() {
    $.getJSON("documents/Exercises.json", function(result) {
      $.each(result, function(i, field) {
        document.getElementById("thisdiv").innerHTML = feild.Content;
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1">Click</button>
<div id="thisdiv"></div>

JSON

[
  {
    "ID": "Exercise 1.1",
    "ChapterName": "Chapter 1",
  },
  {
    "ID": "Exercise 1.2",
    "ChapterName": "Chapter 2 ",
  },
  {
    "ID": "Exercise 1.1",
    "ChapterName": "Chapter 3",
  }
]

我的麻烦是领域部分，使用每个部分，我认为这不是解决问题的好方法。

Answer 1

使用JSON.stringify()将JSON作为字符串输出

$(document).ready(function() {
  $("#button1").click(function() {
    $.getJSON("documents/Exercises.json", function(result) {
      $.each(result, function(i, field) {
        document.getElementById("thisdiv").innerHTML = JSON.stringify(field.Content);
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1">Click</button>
<div id="thisdiv"></div>

工作示例

$(document).ready(function() {
  let content = [{
      "ID": "Exercise 1.1",
      "ChapterName": "Chapter 1",
    },
    {
      "ID": "Exercise 1.2",
      "ChapterName": "Chapter 2 ",
    },
    {
      "ID": "Exercise 1.1",
      "ChapterName": "Chapter 3",
    }
  ];
  $("#button1").click(function() {
    document.getElementById("thisdiv").innerHTML = "<pre>"+JSON.stringify(content,undefined, 2) +"</pre>";
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1">Click</button>
<div id="thisdiv"></div>

如何在单击时用JSON内容填充div

1 个答案: