JavaScript - 配列値が空です

Question

私はユニークなチャレンジを持っています：URL1（ランダムウィキペディアページ）でajaxリクエストをURL2（100個の最も一般的な単語wikipediaページ）にして、後で使用する返されたデータから配列を作成します。

"URL1" 例にしながら、私は、コンソールからこれを実行する必要があります。

1. 移動URL1
へ
2. オープンコンソール
3. ペーストコード

を入力ヒットこれまでのところ、私は次のように非常に近づくことができました：

$.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); 
    }   
});   

しかし、私の配列で空白の値を取得しています。

次のコードは、

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

完璧に動作しますURL2（Ajaxのリクエスト内のリンク）の間、私はそれを削除した後、私は配列を持って、ために.getのこの正確なコードを使用してエラーをのgettinました彼らはすべて空白だった。

ありがとうございました

Answer 1

あなたのロジックは間違っています。 $.mapと$().mapは、異なるコンテキストと異なる引数を持つ異なる機能です。

正しいmap機能を使用すると、問題を解決する必要があります。 thisキーワードがDOM要素に設定されている、mapの2番目の形式で

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); 
} 

に変更します。

テーブルヘッダーを選択しているので、テーブル内の100単語の代わりに105テキストをコードに返していることに気付きました。 .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」ヘッダーが存在しません。したがって、原点「ヌル」はアクセスが許可されません。

Answer 3

だけのjQueryオブジェクトを反復するのJSマップを使用（HTML要素オブジェクト）

$(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(); 
    });