Как заполнить div содержимым JSON по клику

Question

Я хочу иметь возможность заполнять div содержимым из JSON, когда я нажимаю кнопку.Я хочу, чтобы только один объект из массива объектов заполнял 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 = ""+JSON.stringify(content,undefined, 2) +"

";});});

<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>