JavaScript：如果情况未填写，如何附加段落？

Question

我正在做一个简单的项目，检查学生是否正在写在线日记。使用 userId 检查学生的进度。如果学生的 userId 没有出现在 API 调用类 API 返回的 JSON 中，则应在容器中附加一个段落，告诉学生他们还没有完成任何事情。

这是我正在使用的数据类型的示例。

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

现在假设我正在与用户 ID 为 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>'

如何让错误消息只出现一次？

Answer 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>

Answer 2

试试这个：

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 分配给它，在您的循环中，只需在您的 if 条件中将此变量更改为 0 并在您的 else 条件中更改为 1。

一旦循环结束，只需检查值是否为1，然后显示错误。在这种情况下，您不需要太多更改代码。

Answer 3

您的if 条件应该是!= 而不是==。

如果您想为userId 不等于 106 的学生显示进度条(currentUserId)，那么条件应该是currentUserId != data[index].userId。

编辑：

但是，函数最终运行了 4 次（因为数据中有 4 个学生）。所以这就是我得到的回报：

这不是因为数组中有 4 个元素。这是因为 4 个元素不满足userId 等于currentUserId 的条件。因此，转到else 范围。