$ .getJSON gibt undefined zurück und gibt die angeforderten Daten zurück

Question

Ich habe mich in einer Situation festgefahren. Ich habe ein Wikipedia-Suchwerkzeug für ein persönliches Übungsprojekt programmiert, aber ich habe einen kleinen Fehler bekommen. Wenn ein Benutzer ein Wort in die Suchleiste eingibt, wird die Eingabe in den Datenparameter $.getJSON gespeichert. Anschließend gibt die Antwort ein Array von Titel- und Beschreibungsobjekten basierend auf dem in der Suchleiste eingegebenen Wort zurück. Die Funktion $.getJSON zeigt 5 Sätze eines Titels und seine Beschreibung in einem Listenformat im angegebenen HTML an. Einfach genug, aber das Problem ist die $.getJSON Funktion zeigt den Wortlaut "undefined", dann weiterhin die erforderlichen Titel und Beschreibungen anzuzeigen. Im Folgenden habe ich meinen JS-Code für Ihre Anzeige aufgelistet. Außerdem kann der vollständige Code unter meiner codepen angesehen werden.

Kann mir jemand einen Hinweis geben, was das Problem sein könnte. Da $.getJSON asynchron ist, könnte das das Problem sein, aber ich kann es nicht genau sagen. Danke im Voraus!

$("#search-word").on("keydown", function(event) { 
if(event.keyCode == 13) { 
    event.preventDefault(); 
    var input = {search: $(this).val()}; 
    getWikiInfo(input); 
} 
});//search end 

function getWikiInfo(input) { 
var wikipApi = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&callback=?"; 
var getWikipHtml = function(response) { 
    console.log(response); 
    var wikipHtml; 
    for(var i = 1; i < 6; i++) { 
    wikipHtml += '<div class="list"><h3>' + response[1][i] + '</h3><p>' + response[2][i] + '</p></div>'; 
    } 
    $("#list-container").html(wikipHtml); 
    } 
$.getJSON(wikipApi, input, getWikipHtml); 
}//getWikiInfo end 

Answer 1

Sie müssen geringfügige Änderungen vornehmen. Initialisiere wikipHtml, um die Zeichenfolge zu leeren, und überprüfe, ob die response[1][i] nicht undefined ist. Unten ist der aktualisierte Code:

var wikipHtml = ''; 
for (var i = 1; i < 6; i++) { 
    if (response[1][i] !== undefined) 
    wikipHtml += '<div class="list"><h3>' + response[1][i] + '</h3><p>' + response[2][i] + '</p></div>'; 
} 

Answer 2

Dies geschieht, weil Sie nicht wikipHtml initialisiert werden, bevor sie es anhängt, aber ich würde dringend empfehlen, dass Sie die richtige DOM-Manipulation verwenden, anstatt Ihre HTML mit String-Verkettung des Gebäudes:

$("#search-word").on("keydown", function(event) { 
 
    if (event.keyCode == 13) { 
 
    event.preventDefault(); 
 
    var input = { 
 
     search: $(this).val() 
 
    }; 
 
    getWikiInfo(input); 
 
    } 
 
}); //search end 
 

 
function getWikiInfo(input) { 
 
    var wikipApi = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&callback=?"; 
 
    var getWikipHtml = function(response) { 
 
    var content = [0, 1, 2, 3, 4, 5].map(function(i) { 
 
     return $('<div class="list">') 
 
     .append($('<h3>').text(response[1][i])) 
 
     .append($('<p>').text(response[2][i])); 
 
    }); 
 

 
    $("#list-container").html(content); 
 
    } 
 
    $.getJSON(wikipApi, input, getWikipHtml); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id='search-word' type='text' /> 
 
<div id='list-container'></div>