От XML до массива до выпадающего списка (пример jsfiddle)

Question

Спасибо, что посмотрели на это, я думаю, что это будет легкий ответ, но я не могу понять это сам.

Я пытаюсь сделать выпадающее меню для выбора пользователя из документа удаленного XML, содержащих многие ниже 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> 

Это работает, но после того, как я выбираю пользователь, я m не уверен, как вытащить свою другую соответствующую информацию для использования. Я думал, что было бы лучше иметь массив каждого элемента ID [], UserName [] и т. Д., Но не знаю, как это сделать, и многие поиски не дали никаких релевантных результатов.

Ниже приведен код, который я в настоящее время должен вытащить из XML и выполнить поиск первых & Фамилии.

$.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>

Наряду с jsfiddle из так далеко работающий код https://jsfiddle.net/65n79t6d/

Answer 1

Полное раскрытие, я никогда не разместил вопрос и был кто-то ответить на StackOverflow, мои вопросы не ясно? Как мне получить ответы? Мне потребовалось 2,5 недели исследований, чтобы понять это, но, наконец, получил это PTL.

В любом случае ответ заключается в том, чтобы просто создать массив для каждой части информации, которую вы хотите извлечь из пользователя, а затем сохранить ее под номером (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, чтобы она не перезаписывала переменные массива, которые вы только что сохранили.

Ниже приведен фрагмент того, что сработало для меня, которое отобразит информацию при изменении значения. Вы можете использовать eventlistener, если вы не хотите использовать java в HTML.

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>