XML to Arrayドロップダウンリスト（jsfiddleの例）

Question

これを見ていただきありがとうございます。私は簡単な答えになると思いますが、自分では理解できません。

私はこれが機能している以下のXMLスニペット（citrowske.com/xml.xml）

<User> 
    <Id>111111111111</Id> 
    <UserName>testuser1@example.com</UserName> 
    <FirstName>Test</FirstName> 
    <LastName>User1</LastName> 
    <Active>true</Active> 
    <Email>testuser1@example.com</Email> 
    <AccessLevel>Learner</AccessLevel> 
</User> 

の多くを含むリモートXMLドキュメントからユーザーを選択するドロップダウンを作成しようとしていますが、私は、ユーザーを選択した後、私は」彼の他の関連情報をどのように利用するかわからない。 各アイテムID []、UserName []などの配列を持つのが最善だと思ったが、これを行う方法がわからず、多くの検索で関連する結果が得られていない。

以下は、XMLを検索して最初に検索するコードです。&姓。それまでの作業コードのjsfiddle https://jsfiddle.net/65n79t6d/

Answer 1

全開示とともに

$.ajaxPrefilter(function (options) { 
 
    if (options.crossDomain && jQuery.support.cors) { 
 
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); 
 
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url; 
 
    //options.url = "http://cors.corsproxy.io/url=" + options.url; 
 
    } 
 
}); 
 

 
$.get(
 
    'http://citrowske.com/xml.xml', 
 
    function (xml) { 
 
     //console.log("> ", xml); 
 
     //$("#viewer").html(xml); 
 
     
 
//////////////////////////////////// 
 
var select = $('#yourdropdownbox'); 
 
\t \t select.append('<option value="">Select a User</option>'); \t \t \t \t 
 
\t \t $(xml).find('User').each(function(){ \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t var FirstNames = $(this).find('FirstName').text(); 
 
\t var LastNames = $(this).find('LastName').text(); 
 
    
 
\t \t select.append("<option value='"+ FirstNames +"'>"+FirstNames+" "+LastNames+"</option>"); 
 
\t }); 
 
\t } 
 
//////////////////////////////////// 
 

 
);

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<select id="yourdropdownbox"> 
 

 
</select>

、私が質問を投稿しないと誰かがstackoverflowの上でそれに答える持っていた、私の質問です決してました定かでない？回答を得るにはどうしたらいいですか？これを理解するのに2.5週間の研究が必要でしたが、最終的にはPTLを得ました。

とにかく答えは、ユーザーから引き出したい情報ごとに配列を作成し、その中にtoを（i）参照することができる番号の下に格納することです。
例：

id[1] //will pull the id for the first user 
username[1]// will pull the username for the first user 
lastname[1]// will pull the last name for the first user 

は、以下のステートメントのため、それはユーザーごとに括弧内の文のすべてを完了することを忘れないでくださいそれが今

$(xml).find('User').each(function(){ 

を見つけ、あなたが検索していること必要なすべての関連情報を引き出します

array[i] = $(this).find('InfoName').text(); 

次に、次のノードを検索する前に、データを保存したばかりの配列変数を上書きしないようにi変数をインクリメントします。

以下は、値が変更されたときに情報を表示する私の仕事のスニペットです。 HTMLでjavaを使用したくない場合は、eventlistenerを使用できます。

var id = ["0"];// define all those arrays, you could also use an obj 
 
var username = ["0"]; 
 
var lastname = ["0"]; 
 
var firstname = ["0"]; 
 
var email = ["0"]; 
 
var active = ["0"]; 
 
var accesslevel = ["0"]; 
 
var i = 0; 
 

 
$.ajaxPrefilter(function (options) { 
 
    if (options.crossDomain && jQuery.support.cors) { 
 
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); 
 
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url; 
 
    //options.url = "http://cors.corsproxy.io/url=" + options.url; 
 
    } 
 
}); 
 

 
$.get(
 
    'http://citrowske.com/xml.xml', 
 
    function (xml) { 
 
     //console.log("> ", xml); 
 
     //$("#viewer").html(xml); 
 
     
 
//////////////////////////////////// 
 
var select = $('#yourdropdownbox'); 
 
\t select.append('<option value="">Select a User</option>'); \t \t \t \t 
 
\t $(xml).find('User').each(function(){ \t 
 
        id[i] = $(this).find('Id').text(); // get id in each <User></User> and put it in the array id[i#] 
 
        username[i] = $(this).find('UserName').text();// "" for UserName 
 
        firstname[i] = $(this).find('FirstName').text();// "" for FirstName 
 
        lastname[i] = $(this).find('LastName').text();// "" for LastName 
 
        active[i] = $(this).find('Active').text();// "" for Active 
 
        email[i] = $(this).find('Email').text();// "" for Email 
 
        accesslevel[i] = $(this).find('AccessLevel').text();// "" for AccessLevel 
 
    
 
\t \t select.append("<option value='"+ i +"'>"+firstname[i]+" "+lastname[i]+"</option>");// The shown text is the First & Last name while the value is the i number associated with their information 
 
\t i++;// increment the i value 
 
    }); // end of the user, now on to the next user 
 
\t } 
 
//////////////////////////////////// 
 

 
); 
 

 
function info(){ 
 
var num = document.getElementById('yourdropdownbox').value; 
 
    alert("Name: "+firstname[num]+" "+lastname[num]+"\nUsername: "+username[num]+"\nID: "+id[num]+"\nEmail: "+email[num]+"\nActive: "+active[num]+"\nAccess Level: "+accesslevel[num]); 
 
};

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<select id="yourdropdownbox" onchange="info()"> 
 

 
</select>