试图很好地显示来自维基百科的json数据

Question

我无法将JSON数据格式化为html我尝试了各种方法，只是想要一些帮助或指向正确的方向。我一直在玩的例子是＆＃39; apple＆＃39;这是我目前得到的，这是apiResult数组(pic)的第二个元素。

在我的ajax调用中，我使用的操作是opensearch，因为我被建议这样做，但我看到很多人使用查询。如果有人需要自己查看，这是我的codepen。感谢您的帮助，我很感激。

这是我的HTML：

<div id="main">
  <div id="title">
    <h1>Wikipedia searcher!</h1>
    <hr />
  </div>
  <div id="content">
    <h3 id="random"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random wikipedia page</a></h3>
    <form>
      <div class="row" id="searchDiv">
        <div class="col-xs-4">
          <h3>Search for a wikipedia article:</h3>
        </div>
        <div class="col-xs-4">
          <input type="text" class="form-control" id="search" name="search">
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-default" id="searchBtn">Search</button>
        </div>
      </div>
    </form>
    <ul id="theData">
    </ul>
  </div>
</div>
</div>

这是我的JS：

$(document).ready(function() {
  $("#searchBtn").click(function() {
    var $theData = $("#theData");
    var title;
    $.ajax({
      url: 'https://en.wikipedia.org/w/api.php',
      data: {
        action: 'opensearch',
        limit: 10,
        namespace: 0,
        search: $("#search").val(),
        format: 'json'
      },
      dataType: 'jsonp',
      success: function processResult(apiResult) {
        var html = "";
        $theData.html("Displaying search results for " + apiResult[0]);
        apiResult.shift();
        console.log(apiResult[0].length);
        $.each(apiResult, function(i, apiResult) {
          for(var x = 0; x <= apiResult[0].length; x++)
            {
            html += "<div class='result'>";
            html += apiResult[i][x] + "<br>";
            html += "</div><br>";
            }
        });
        $theData.append(html);
      }
    });
  });
});