Блог

Я работаю над простым проектом, который проверяет, работает ли студент над онлайн-журналом. Прогресс учащегося проверяется с помощью идентификатора пользователя. Если идентификатор пользователя учащегося не отображается в JSON, возвращаемом вызовом API для class API, к контейнеру следует добавить абзац, чтобы сообщить учащемуся, что они ничего не завершили.

Вот пример типа данных, с которыми я работаю.

 data = [ 
    { "userId": 101, "pagesDone": "005" },
    { "userId": 102, "pagesDone": "010" },
    { "userId": 103, "pagesDone": "020"},
    { "userId": 104, "pagesDone": "015" }
]
  

Теперь предположим, что я работаю со студентом с идентификатором пользователя 106. Этот студент не отображается в данных JSON, потому что они еще не начали работать над журналом.

 let currentUserId = 106;
// Student has not completed anything in their journal

let showStudentJournal = (data, currentUserId) => {

  for (var index = 0; index < data.length; index  ) {
    if (currentUserId == data[index].userId) {

  // I have figured out the code here, basically I append a progressBar to a container to show the student's progress
  // I won't show the code here since that's not what we're focusing on. 

      //The thing I want to happen is, get a paragraph to appear if the student hasn't filled out any of the online journal yet
    } else {
      $("#progressContainer").append('<p>You have not yet started your online Journal</p>');
    }
  }
}
  

Однако в конечном итоге функция выполняется 4 раза (потому что в данных 4 учащихся). Итак, это то, что я получаю обратно:

 '<p>You have not yet started your online Journal</p>'
'<p>You have not yet started your online Journal</p>'
'<p>You have not yet started your online Journal</p>'
'<p>You have not yet started your online Journal</p>'
  

Как мне заставить сообщение об ошибке появляться только один раз?

Попробуйте это:

 let currentUserId = 106;
//student has not completed anything in their journal

let showStudentJournal = (data, currentUserId) => {
    let userFound = 0;
    for (var index = 0; index < data.length; index  ) {
        if (currentUserId == data[index].userId) {
            userFound = 0;
            //I have figured out the code here, basically I append a progressBar to a container to show the student's progress
            //I won't show the code here since that's not what we're focusing on. 

            //the thing I want to happen is, get a paragraph to appear if the student hasn't filled out any of the online journal yet
        } else {
            userFound = 1;                
        }
        if (userFound == 1) {
            $("#progressContainer").append('<p>You have not yet started your online Journal</p>');
        }
    }
}
  

Я только добавил переменную перед циклом for и назначил 0 ей, а в вашем цикле просто измените эту переменную на 0 в вашем if состоянии и 1 в вашем else состоянии.

Как только цикл завершится, просто проверьте значение, если оно есть 1 , а затем покажите ошибку. В этом случае вам не нужно сильно менять свой код.

использовать find

 const currentUserId = 005;

const data = [ 
    {"userId": 101, pagesDone: "005"},
    {"userId": 102, pagesDone: "010"},
    {"userId": 103, pagesDone: "020"},
    {"userId": 104, pagesDone: "015"} 
];

let showStudentJournal = function(currId) {
    const found = data.find(({userId}) => parseInt(currId) === parseInt(userId));
    if(found) {
        // code
    } else {
        $("#progressContainer").append('<p>You have not yet started your online Journal</p>');
    }
}

showStudentJournal(currentUserId);  

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

Ваше if условие должно быть != вместо == .

Если вы хотели показать индикатор выполнения для студентов с userId значением, не равным 106( currentUserId ), то условие должно быть currentUserId != data[index].userId .

Редактировать:

Однако в конечном итоге функция выполняется 4 раза (потому что в данных 4 учащихся). Итак, это то, что я получаю обратно:

Это не потому, что в массиве 4 элемента. Это потому, что 4 элемента не удовлетворяют условию наличия userId , которое равно currentUserId . Следовательно, переходим к else области видимости.