数据不会与getjson一起出现未定义

问题描述

api数据显示为未定义，我不明白为什么。 这是我的HTML代码：

$(document).ready(function() {
  $.getJSON("https://data.iledefrance.fr/api/records/1.0/search/?dataset=repertoire-bibliotheques&q=&refine.typeinst=Mus%C3%A9e",function(json) {
    console.log(json.records.fields);
    console.log(json);

    var recordid = '';
    $.each(json,function(key,value) {
      recordid += '<tr>';
      recordid += '<td>' + value.noMetablissement + '</td>';
      recordid += '<td>' + value.telephone + '</td>';
      recordid += '<td>' + value.codepostal + '</td>';
      recordid += '<td>' + value.commune + '</td>';
      recordid += '</tr>';
    });
    $('#recordid_table').append(recordid);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="table-responsive">
    <h1>Musées Parisiens</h1>
    <br />
    <table class="table table-bordered table-striped" id="recordid_table">
      <tr>
        <th>Nom de l'établissemnt</th>
        <th>Numéro de Téléphone</th>
        <th>Code Postal</th>
        <th>Commune</th>
      </tr>
    </table>
  </div>
</div>

这是我的JS代码：

我不明白为什么数据在表中显示为未定义。如果可以帮助回答我的问题，这是我的数据集：https://data.iledefrance.fr/api/records/1.0/search/?dataset=repertoire-bibliotheques&q=&refine.typeinst=Mus%C3%A9e 谢谢您的帮助！

解决方法

您的数据结构比您处理数据的方法还要深。

您需要循环的数组是json.records，每个记录都有一个fields对象，您想要的属性在其中

$(document).ready(function() {
  $.getJSON("https://data.iledefrance.fr/api/records/1.0/search/?dataset=repertoire-bibliotheques&q=&refine.typeinst=Mus%C3%A9e",function(json) {
    var recordid = '';
    $.each(json.records,function(key,value) {
      var fields = value.fields;
      recordid += '<tr>';
      recordid += '<td>' + fields.nometablissement + '</td>';
      recordid += '<td>' + fields.telephone + '</td>';
      recordid += '<td>' + fields.codepostal + '</td>';
      recordid += '<td>' + fields.commune + '</td>';
      recordid += '</tr>';
    });
    $('#recordid_table').append(recordid);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="table-responsive">
    <h1>Musées Parisiens</h1>
    <br />
    <table class="table table-bordered table-striped" id="recordid_table">
      <tr>
        <th>Nom de l'établissemnt</th>
        <th>Numéro de Téléphone</th>
        <th>Code Postal</th>
        <th>Commune</th>
      </tr>
    </table>
  </div>
</div>