Estoy buscando extraer datos de una API de bolsa de trabajo. Me gustaría tener encabezados para los departamentos (extraídos del nivel 1 de JSON) y, debajo de cada departamento, las posiciones abiertas actuales (nivel 2 de JSON). He jugado con estas 50 formas diferentes y he revisado todos los artículos relacionados que puedo encontrar, pero simplemente no puedo hacer que las fichas de dominó caigan en mi cerebro.
Actualizar
Me he acercado bastante, pero obviamente me falta cómo hacer un bucle de esto correctamente. Repite cada departamento y trabajo en lugar de anidar todos los trabajos bajo el encabezado del departamento una vez.
Fiddle para ver dónde estoy: 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>El problema principal es que genera el h3 para cada trabajo, pero solo debe generarse una vez por iteración del ciclo externo (no el ciclo interno ).
También usaría más estilo jQuery para crear los elementos, y usaría async / await para aplanar un poco el "infierno de devolución de llamada".
$(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>Para excluir departamentos para los que no hay trabajos:
$(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>