I'm trying to 'loop' through results like the following html is setup with javascript. (Parsing XML in Javascript) But I can't work out how to loop through more than one variable at a time. Basically I keep having the surname loop and loop in one line.
<div class="files-box">
<img class="replace-2x file-image" width="32" src="images/files/doc.png" alt="img">
<p class="file-title" id="list">[SURNAME]</p>
<a href="#" class="file-href file-open">[PHONE NUMBER]</a>
<a href="#" class="file-href">[CALLLINK]</a>
<div class="clear"></div>
</div>
</div>
Here is my Javascript
function onDeviceReady()
{
$.ajax({
type: 'GET',
url: 'Lookupbysurname.aspx?surname=beech',
dataType: 'xml',
success: function(xmlDoc) {
var $xml = $(xmlDoc);
$xml.find('Surname').each(function() {
$("#list").append($(this).text());
});
}
});
}
</script>
Basically I'm trying to loop through the xml results (surname, phone number and callink) and re-create the html above each time with the [SURNAME] etc variables replaced by the correct result. It's going in a phonegap app
EDIT: Below as requested is the XML layout
<Results>
<Result>
<FirstName>Tom</FirstName>
<Surname>Bedh</Surname>
<Company>Company INC/Company>
<Job_Title>Test Title</Job_Title>
<callID>10582</callID>
<CompanyID>10001</CompanyID>
</Result>
</Results>
Heres what keeps happening in the current layout
Try something like this. First you need to change your HTML structure:
<div id="container">
<div class="files-box">
<img class="replace-2x file-image" width="32" src="images/files/doc.png" alt="img">
<p class="file-title surname">[SURNAME]</p>
<a href="#" class="file-href file-open phone-number">[PHONE NUMBER]</a>
<a href="#" class="file-href call-link">[CALLLINK]</a>
<div class="clear"></div>
</div>
</div>
jQuery:
var $block = $('#container .files-box').remove();
$xml.find('Result').each(function() {
var $result = $(this),
$myblock = $block.clone();
$myblock.find(".surname").text($result.find('Surname').text());
$myblock.find(".phone-number").text($result.find('Phone').text());
$myblock.find(".call-link").text($result.find('callID').text());
$('#container').append($myblock);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.