JavaScript - Значения массива пустые

Question

У меня есть уникальная проблема: Пока на URL1 (случайная страница wikipedia), сделайте запрос ajax к URL2 (100 наиболее распространенных страниц wikipedia слов), создайте массив из возвращаемых данных, которые будут использоваться позже.

я должен запускать это из консоли, а на "url1" пример:

1. Перейдите url1
2. Открыть консоль
3. паста код
4. хит введите

До сих пор мне удалось очень близко подойти со следующим:

$.ajax({ 
    url: 'https://en.wikipedia.org/wiki/Most_common_words_in_English', 
    type: 'GET', 
    dataType: 'html', 
    success: function(data) { 
      Names = $.map($(data).find('.wikitable tr'), function() { 
return $(this).find('td:last').text()}); 
console.log(Names); 
    }   
});   

Но я получаю пустые значения в своем массиве.

В то время как на URL2 (ссылка в запросе Ajax) следующий код работает отлично

var Names = $('.wikitable tr').map(function() { 
return $(this).find('td:last').text() }).get(); console.log(Names); 

Я получаю ошибки, используя именно этот код из-за .get, после его удаления, я получил массив с правильное количество элементов, но все они были пустыми.

Благодаря

Answer 1

Ваша логика верна, вы просто используете неправильные функции. $.map и $().map - это разные функции с различными контекстами и разными аргументами.

Ваша проблема должна быть решена, если вы используете правильную функцию map. Изменение

success: function(data) { 
    Names = $.map($(data).find('.wikitable tr'), function() { 
     return $(this).find('td:last').text(); 
    }); 
    console.log(Names); 
} 

в

success: function(data) { 
    Names = $(data).find('.wikitable tr').map(function() { 
     return $(this).find('td:last').text(); 
    }); 
    console.log(Names); 
} 

Во второй форме map, то this ключевое слово устанавливается в DOM элемента.

Я также заметил, что код возвращает 105 тексты вместо 100 слов в таблице, так как он выбирает заголовки таблиц. Еще один интересный трюк .map заключается в том, что если вы вернетесь null, он не будет включать значение в результат. Таким образом, вы могли бы что-то вроде

Names = $(data).find('.wikitable tr').map(function() { 
    return $(this).find('td:last').text() || null; 
}); 

как пустая строка вычисляет false так return вернется null вместо ''. Или, вы можете просто сделать ваш селектор более конкретным, например:

Names = $(data).find('.wikitable tr td:odd').map(function() { 
    return $(this).text(); 
}); 

Answer 2

Не могли бы вы также проверить с помощью F12, если выбрасывается какая-либо ошибка.

XMLHttpRequest не может загрузить https://en.wikipedia.org/wiki/Most_common_words_in_English. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Поэтому исходный 'null' не допускается.

Answer 3

Просто используйте карту Js перебрать JQuery объектов (Html ​​элемент Object)

$(data).find('.wikitable tr').map(function() { 
     return $(this).find('td:last').text(); 

JQuery карта работает только на примитивов массива не на объекте

$.map($(data).find('.wikitable tr'), function() { 
     return $(this).find('td:last').text(); 
    });