使用 Jquery 解析/顯示嵌套的 JSON 數組

Question

我希望從工作板 API 中提取數據。 我想為部門（從 JSON 級別 1 拉出）和每個部門下的當前空缺職位（JSON 級別 2）設置標題。 我已經修補了這 50 種不同的方式，並瀏覽了我能找到的所有相關文章，但就是無法讓多米諾骨牌落在我的腦海中。

更新

我已經非常接近了，但我顯然錯過了如何正確循環。 它重復每個部門和工作，而不是將所有工作嵌套在部門標題下一次。

小提琴看看我在哪里 - 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 ，但每次外循環（而不是內循環）的迭代只能輸出一次。

我還會使用更多的 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>