Parse/Display 嵌套 JSON 数组 Jquery

Question

我想从求职板上提取数据 API。我想要部门的标题（从 JSON 级别 1 提取）和每个部门下的当前空缺职位（JSON 级别 2）。我已经对这 50 种不同的方式进行了修补，运行浏览了我能找到的所有相关文章，但就是无法完全让多米诺骨牌落入我的脑海。

更新

我已经很接近了，但我显然不知道如何正确循环。它重复每个部门和工作，而不是将所有工作嵌套在部门 header 下一次。

Fiddle 看看我在什么地方 - https://jsfiddle.net/swampfox/f6jv204x/#&togetherjs=GjcUL090zr

$(function() {
  $.ajax({
    url: 'https://boards-api.greenhouse.io/v1/boards/agilityrobotics/departments',
    data: {
      check: 'one'
    },
    dataType: 'jsonp',
    success: function(result) {
      $.each(result, function(key, value) {
        for (var i = 0; i < value.length; i++) {
          $.each(value[i].jobs, function(k, v) { // Second Level into Jobs
            $('#jsonpResult').append(
              $('<h3>' + value[i].name + '</h3><p class="cat"><a class="joblink" href="' + v.absolute_url + '"> ' + v.title + '</a></p>')
            );
          });
        }
      });
    }
  });
});

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

Answer 1

主要问题是您为每个作业输出 h3，但它应该只在 outer 循环的每次迭代中输出一次（而不是内部循环）。

我还会使用更多 jQuery 样式来创建元素，我会使用 async/await 来平息“回调地狱”。

$(async function() {
    let {departments} = await $.getJSON('https://boards-api.greenhouse.io/v1/boards/agilityrobotics/departments');
    $("#jsonpResult").append(
        departments.flatMap(({name, jobs}) => [
            $("<h3>").text(name),
            ...jobs.map(({absolute_url: href, title}) =>
                $("<p>", { "class": "cat" }).append(
                    $("<a>", { href, "class": "joblink" }).text(title)
                )
            )
        ])
    );
});

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

要排除没有职位的部门：

$(async function() {
    let {departments} = await $.getJSON('https://boards-api.greenhouse.io/v1/boards/agilityrobotics/departments');
    $("#jsonpResult").append(
        departments.flatMap(({name, jobs}) => jobs.length ? [
            $("<h3>").text(name),
            ...jobs.map(({absolute_url: href, title}) =>
                $("<p>", { "class": "cat" }).append(
                    $("<a>", { href, "class": "joblink" }).text(title)
                )
            )
        ] : [])
    );
});

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

Parse/Display 嵌套 JSON 数组 Jquery

Parse/Display nested JSON array with Jquery

javascript

arrays

jquery

json