Javascript 使用Ajax时简单if-else语句存在问题

我有一个小而令人沮丧的问题（尽管我认为它可能是小而愚蠢的），我已经花了好几个小时，尝试不同的方法，切换变量，只是做一些事情看看它是否会起作用

我有一个

XMLHttpRequest

对象，还有一个

API

返回法术及其效果。但是，在

generateSpellBody

函数中，

if（）else（）

语句没有正确执行。我不断地得到结果

而不是拼写

，无论我如何改变条件，尝试不同的方法，我尝试了

indexOf（）

，

json.parse

等。我只在

test.innerHTML

中不断地得到

else

条件的结果

const spells = 'https://{my-spells-api-and-auth-key}';
const spellBtn = document.querySelector('.spell-btn');
const spellTextBox = document.querySelector('#spell-text');
let test = document.querySelector('.test');

function getJson (url, callback) {
    const xhr = new XMLHttpRequest;
    xhr.open('GET', url);
    xhr.onload = () => {
        if (xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            return callback(data);
        }
    };
    xhr.send();
}

function generateSpellBody (data) {

     data.map(dat => {
         if (dat.spell === spellTextBox.value) {
            console.log(dat.spell);
            test.innerHTML = dat.spell;
        }
        else {
            test.innerHTML = 'not a spell';
        }

    });

}

spellBtn.addEventListener('click', (e) => {
    e.preventDefault();
    getJson(spells, generateSpellBody);
});

HTML:

函数generateSpellBody（数据）{
var newArray=data.map（dat=>dat.spell==spellTextBox.value？dat.spell:“不是拼写”）
for（设i=0；i

您可以在for循环中使用timeOut函数来查看效果

for (let i =0; i < newArray.length; i++){
     setTimeout(function(){ test.innerHTML = newArray[i]; }, 3000);

   }

for（设i=0；i

首先，

map

函数不是此处使用的正确函数，请使用

for

循环

谈到代码中的问题，当

如果

条件的计算结果为

假

，

否则

块将运行，这将为您提供输出

而不是拼写

。如果正确的拼写位于数据数组的最后一个索引处，则代码将正确查找并更新

DOM

，否则如果您已找到正确的拼写，则在循环的下一次迭代中，

else

块将运行并用

而不是拼写

覆盖正确的拼写

找到正确的

拼写后，请删除
else
块或中断循环

我建议在循环结束后删除
else
块并设置
test.innerHTML
，因为如果
条件的计算结果为
false
，您不希望每次
都更新
DOM
。下面的代码片段显示了这种方法


const spellBtn=document.querySelector（'.spell btn'）；
const spellTextBox=document.querySelector（“#拼写文本”）；
let test=document.querySelector（'.test'）；
常数数据=[
{“拼写”：“Aberto”}，
{“拼写”：“Accio”}，
{“拼写”：“年龄线”}，
{“拼写”：“Aguamenti”}
];
函数generateSpellBody（数据）{
让文本='不是拼写'；
for（设i=0；i{
e、 预防默认值（）；
生成单元体（数据）；
});

拼写
你能发布api返回的数据吗？@Yousaf如果我编辑了我的问题，将返回的部分数据包括在内。如果移除
else
block，我会得到正确的拼写返回。请解释一下？为什么我不能使用map（），是否有我的if-else块不能正常工作的原因？我想知道我做错了什么。哦，这是我的错！！！不知怎的，我忘了写map，在我们的例子中，map是最好的选择，如果你不想使用map，那么reduce和filter的组合将在这些情况下起作用。顺便问一下，当你可以使用
fetch
api来发出HTTP请求时，为什么要使用
XMLHttpRequest
呢？这是我的下一步。我学习了
XMLHttpRequest
和
promissions
，现在我想做
fetch
。我觉得我需要学习一切，而不仅仅是跳到最好的。我从基础开始，并从那里改进我的代码
[
    {
        "_id": "5b74ebd5fb6fc0739646754c",
        "spell": "Aberto",
        "type": "Charm",
        "effect": "opens objects"
    },
    {
        "_id": "5b74ecfa3228320021ab622b",
        "spell": "Accio",
        "type": "Charm",
        "effect": "Summons an object",
        "__v": 0
    },
    {
        "_id": "5b74ed2f3228320021ab622c",
        "spell": "Age Line",
        "type": "Enchantment",
        "effect": "Hides things from younger people",
        "__v": 0
    },
    {
        "_id": "5b74ed453228320021ab622d",
        "spell": "Aguamenti",
        "type": "Charm",
        "effect": "shoots water from wand",
        "__v": 0
    }
]

 function generateSpellBody (data) {
    var newArray = data.map(dat=>dat.spell ===spellTextBox.value?dat.spell:'not a spell')

   for (let i =0; i < newArray.length; i++){
      test.innerHTML = newArray[i];
   }

 };

for (let i =0; i < newArray.length; i++){
     setTimeout(function(){ test.innerHTML = newArray[i]; }, 3000);

   }