Перекрестные идентификаторы ссылок для вывода правильного имени JavaScript

Question

Итак, чтобы сократить это, вот что я пытаюсь сделать.

У меня есть два выхода JSON, и я перебираю все данные, я могу успешно вывести имя элемента и URL веб-сайта,это работает.Тем не менее, каждая работа имеет department_id, и у каждого отдела есть идентификатор.Я могу передать оба набора идентификаторов, но мне нужно поставить правильный отдел с заданием, поэтому мне нужно как-то перекрестно ссылаться на идентификаторы, чтобы отдел отображался на правильном задании.

Вот что у меня естьпока что

<script>
    (function() {
      const jobPositions = document.getElementById('jobPositions');

      var jobs = $.ajax({
        url : 'https://www.welcomekit.co/api/v1/external/jobs?access_token=redac&organization_reference=redac&websites=true&status=published',
        dataType: 'json'
      });

      var jobDepartments = $.ajax({
        url: 'https://www.welcomekit.co/api/v1/external/departments?access_token=redac&organization_reference=redac',
        dataType: 'json'
      });

      $.when(jobs, jobDepartments).done(function(jobs, jobDepartments) {
        var data1 = jobs[0];
        var data2 = jobDepartments[0];

        $.each(data1, function(i, item) {
          var start = i++;
          var jobDept = item.department_id;
          var jobID = data2[i].id;
          var JobDeptName = data2[i].name;

          const dept = jobID === jobDept;
          console.log(jobID, jobDept, dept);

          if(start) {
            $(jobPositions).append('\
            <a target="_blank" href="'+ item.websites[1].url +'" class="jobPosition-item d-md-flex justify-content-between align-items-center flex-wrap">\
              <div>\
                <span class="jobPositions-name">' + item.name + '</span>\
              </div>\
              <div class="right right-info d-flex align-items-center">\
                <span class="jobPositions-profession">' + JobDeptName + '</span>\
                <div class="d-flex">\
                  <img src="/hubfs/www/about/white-icon-arrow.png" height="11" width="11" alt="arrow">\
                </div>\
              </div>\
            </a>\
          ');
          }
        });
      });
    })();
  </script>

Код здесь (я буду ссылаться с комментариями)

//gets the department_id from item
var jobDept = item.department_id

//gets the department id from data2
var jobID = data2[i].id

//gets the name from each department to be used in the HTML
var JobDeptName = data2[i].name;

//This is to see whether both ids match, not sure if this is the right way to do this
const dept = jobID === jobDept;

//outputs everything
console.log(jobID, jobDept, dept);

Результат, который я получаю, таков:

Который отображает это

Это неверно, так как оба эти задания находятся под 10893, поэтому не верноID, он также не отображает ответы всех элементов, которые я принимаю из-за неопределенной ошибки, но у каждой работы есть отдел.

Я не уверен, что лучший способ сделать это, любые предложения приветствуются.

Answer 1

Ошибка здесь: var jobID = data2[i].id;.Вы применяете индекс массива data1 к массиву data2.Это должно быть что-то вроде этого.

var job = data2.find(d => d.id === item.department_id);
if(job)
   var jobID = job.id;