Develop Reference

How can i show the data from XML file with drop down list?

All gpu in the XML file has an architecture . After reading the web page need to automatically generate a drop-down list with the name of each architecture name only once. When selecting each architecture, display list of which gpu () on the web page.
Honestly, I got stuck that they might be able to be identified by ID or have access to the data in some other way. How can i show the data with the selected architecture?
So there is the XML file:
<!--
This XML contains the
Model name,
Codename,
Launch date(year),
Architecture,
MSRP ($)
of some Nvidia manufactured GPUs.
-->
<gpus>
<gpu>
<model>GeForce RTX 3090</model>
<codename>GA102-300-A1</codename>
<launch>2020</launch>
<architecture>Ampere</architecture>
<msrp>1499</msrp>
</gpu>
<gpu>
<model>GeForce RTX 3080 Ti</model>
<codename>GA102-225-A1</codename>
<launch>2021</launch>
<architecture>Ampere</architecture>
<msrp>1199</msrp>
</gpu>
<gpu>
<model>GeForce RTX 3080</model>
<codename>GA102-200-KD-A1</codename>
<launch>2020</launch>
<architecture>Ampere</architecture>
<msrp>699</msrp>
</gpu>
<gpu>
<model>GeForce RTX 3070 Ti[</model>
<codename>GA104-400-A1</codename>
<launch>2021</launch>
<architecture>Ampere</architecture>
<msrp>599</msrp>
</gpu>
<gpu>
<model>GeForce RTX 3070</model>
<codename>GA104-300-A1</codename>
<launch>2020</launch>
<architecture>Ampere</architecture>
<msrp>499</msrp>
</gpu>
<gpu>
<model>GeForce RTX 3060 Ti</model>
<codename>GA104-200-A1</codename>
<launch>2020</launch>
<architecture>Ampere</architecture>
<msrp>399</msrp>
</gpu>
<gpu>
<model>GeForce RTX 3060</model>
<codename>GA106-300-A1</codename>
<launch>2021</launch>
<architecture>Ampere</architecture>
<msrp>329</msrp>
</gpu>
<gpu>
<model>GeForce RTX 3050</model>
<codename>GA106-150-A1</codename>
<launch>2022</launch>
<architecture>Ampere</architecture>
<msrp>249</msrp>
</gpu>
<gpu>
<model>GeForce RTX 2080 Ti</model>
<codename>TU102-300-K1-A1</codename>
<launch>2018</launch>
<architecture>Turing</architecture>
<msrp>1199</msrp>
</gpu>
<gpu>
<model>GeForce RTX 2080 Super</model>
<codename>TU104-450-A1</codename>
<launch>2019</launch>
<architecture>Turing</architecture>
<msrp>699</msrp>
</gpu>
<gpu>
<model>GeForce RTX 2080</model>
<codename>TU104-400-A1</codename>
<launch>2018</launch>
<architecture>Turing</architecture>
<msrp>799</msrp>
</gpu>
<gpu>
<model>GeForce RTX 2070 Super</model>
<codename>TU104-410-A1</codename>
<launch>2019</launch>
<architecture>Turing</architecture>
<msrp>499</msrp>
</gpu>
<gpu>
<model>GeForce RTX 2070</model>
<codename>TU106-400-A1</codename>
<launch>2018</launch>
<architecture>Turing</architecture>
<msrp>599</msrp>
</gpu>
<gpu>
<model>GeForce RTX 2060 Super</model>
<codename>TU106-410-A1</codename>
<launch>2019</launch>
<architecture>Turing</architecture>
<msrp>399</msrp>
</gpu>
<gpu>
<model>GeForce RTX 2060</model>
<codename>TU104-150-KC-A1</codename>
<launch>2020</launch>
<architecture>Turing</architecture>
<msrp>299</msrp>
</gpu>
<gpu>
<model>GeForce GTX 1080 Ti</model>
<codename>GP102-350-K1-A1</codename>
<launch>2017</launch>
<architecture>Pascal</architecture>
<msrp>699</msrp>
</gpu>
<gpu>
<model>GeForce GTX 1080</model>
<codename>GP104-410-A1</codename>
<launch>2017</launch>
<architecture>Pascal</architecture>
<msrp>499</msrp>
</gpu>
<gpu>
<model>GeForce GTX 1070 Ti</model>
<codename>GP104-300-A1</codename>
<launch>2017</launch>
<architecture>Pascal</architecture>
<msrp>449</msrp>
</gpu>
<gpu>
<model>GeForce GTX 1070</model>
<codename>GP104-200-A1</codename>
<launch>2018</launch>
<architecture>Pascal</architecture>
<msrp>379</msrp>
</gpu>
<gpu>
<model>GeForce GTX 1060</model>
<codename>GP106-410-A1</codename>
<launch>2017</launch>
<architecture>Pascal</architecture>
<msrp>299</msrp>
</gpu>
<gpu>
<model>GeForce GTX 1050 Ti</model>
<codename>GP107-400-A1</codename>
<launch>2016</launch>
<architecture>Pascal</architecture>
<msrp>139</msrp>
</gpu>
<gpu>
<model>GeForce GTX 1050</model>
<codename>GP107-301-A1</codename>
<launch>2018</launch>
<architecture>Pascal</architecture>
<msrp>109</msrp>
</gpu>
</gpus>
and there is the JS script (the listXML function needed......):
function xmlRead(){
var serverReadCom = new XMLHttpRequest();
serverReadCom.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var result = this.responseXML;
var opcio = this.responseXML;
console.log(result);
processXML(result);
listXML(opcio);
}
}
serverReadCom.open("GET","nvidia.xml",true);
serverReadCom.send();
}
function processXML(XMLanswer){
var xmlAdat = XMLanswer.getElementsByTagName("gpu");
var addTable = "<table>";
addTable += "<tr><th>#</th>";
addTable += "<th>Model</th>";
addTable += "<th>Codename</th>";
addTable += "<th>Launch</th>";
addTable += "<th>Architecture</th>";
addTable += "<th>MSRP ($)</th></tr>";
addTable += ("Osszesen "+ xmlAdat.length+ " GPU talalhato az XML fajlban.");
for(let i=0; i<xmlAdat.length; i++){
let model = xmlAdat[i].getElementsByTagName("model")[0].childNodes[0].nodeValue;
let codename = xmlAdat[i].getElementsByTagName("codename")[0].childNodes[0].nodeValue;
let launch = xmlAdat[i].getElementsByTagName("launch")[0].childNodes[0].nodeValue;
let architecture = xmlAdat[i].getElementsByTagName("architecture")[0].childNodes[0].nodeValue;
let msrp = xmlAdat[i].getElementsByTagName("msrp")[0].childNodes[0].nodeValue;
addTable +="<tr>";
addTable +="<td>"+ (i+1) + "</td>";
addTable +="<td>"+ model + "</td>";
addTable +="<td>"+ codename + "</td>";
addTable +="<td>"+ launch + "</td>";
addTable +="<td>"+ architecture + "</td>";
addTable +="<td>"+ msrp + "</td></tr>";
}
addTable += "</table>";
document.getElementById("xmlResult").innerHTML = addTable;
}
function listXML(XMLanswer){
var choose = "<select>";
choose += "<option>Ampere</option>";
choose += "<option>Turing</option>";
choose += "<option>Pascal</option>";
choose += "</select>";
var xmlAdat = XMLanswer.getElementsByTagName("gpu");
for(let i=0; i<xmlAdat.length; i++){
let model = xmlAdat[i].getElementsByTagName("model")[0].childNodes[0].text;
let codename = xmlAdat[i].getElementsByTagName("codename")[0].childNodes[0].text;
let launch = xmlAdat[i].getElementsByTagName("launch")[0].childNodes[0].text;
let architecture = xmlAdat[i].getElementsByTagName("architecture")[0].childNodes[0].text;
let msrp = xmlAdat[i].getElementsByTagName("msrp")[0].childNodes[0].text;
if(choose == architecture){
choose +="<tr>";
choose +="<td>"+ (i+1) + "</td>";
choose +="<td>"+ model + "</td>";
choose +="<td>"+ codename + "</td>";
choose +="<td>"+ launch + "</td>";
choose +="<td>"+ architecture + "</td>";
choose +="<td>"+ msrp + "</td></tr>";
}
}
choose += "</table>";
document.getElementById("xmlChoose").innerHTML = choose;
}

Javascript chained select for multiple select inputs

I have 3 Drop-Down lists (), two of them are similar, I created the first one to filter the last two options.
The first select looks like this :
<select id="selectLine">
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L5">L5</option>
<option value="L6">L6</option>
<option value="L7">L7</option>
<option value="L9">L9</option>
<option value="L10">L10</option>
<option value="L11">L11</option>
<option value="L12">L12</option>
<option value="L13">L13</option>
<option value="L14">L14</option>
<option value="L15">L15</option>
<option value="L16">L16</option>
<option value="L17">L17</option>
<option value="L18">L18</option>
<option value="L19">L19</option>
<option value="L20">L20</option>
<option value="L21">L21</option>
<option value="L66">L66</option>
<option value="L32">L32</option>
</select>
The other two are not done manually, they are populated with an array :
var station = [
[0,'JAMAA EL FNA','L1'],
[1,'KOUTOUBIA','L1'],
[2,'HOTEL DE VILLE','L1'],
[3,'R.P BERDII','L1'],
[4,'GRAND POSTE','L1'],
[5,'CAREE EDEN','L1'],
[6,'PL ABDELMOUMEN','L1'],
[7,'PLACE D ARMES','L1'],
[8,'FST','L1'],
[9,'SEMIRAMIS','L1'],
[10,'DR KUDIA','L1'],
[11,'MCDO','L1'],
[12,'CAFE AMINE','L1'],
[13,'FAC SEMLALIA','L1'],
[14,'ROUIDATE','L1'],
[15,'CLUB MINISTRE JUSTICE','L1'],
[16,'BEN TBIB','L1'],
[17,'ASWAK SALAM','L1'],
[18,'BAB DOUKALA','L1'],
[19,'JAMAA EL FNA','L2'],
[20,'KOUTOUBIA','L2'],
[21,'PH KOUTOUBIA','L2'],
[22,'RIAD SHEBA','L2'],
[23,'DAR LBACHA','L2'],
[24,'RIAD LAAROUSSE','L2'],
[25,'BAB TAGHZOUT','L2'],
[26,'BIN LMAASAR','L2'],
[27,'ARSET EL MELLAK','L2'],
[28,'HOPITAL ANTAKI','L2'],
[29,'AVENUE ANTAKI','L2'],
[30,'QCHICH','L2'],
[31,'RUE BAB KHACHICH','L2'],
[32,'AIN ITTI','L2']
...];
this is what I use to do so :
for(var i=0;i<station.length;i++){
var opText = "<option value='"+station[i] [0]+"'>"+station[i][1]+" - "+station[i][2]+"</option>";
$("#selecObject1").append(opText);
}
What I want to do is change the SelecObject1 & SelecObject2 options depending on the value of selectLine. so for exemple if L1 is chosen in the first select, I want the other two selects to only show the lines with the L1 in the third row of the table.
I tried this but it changes all the values on table instead of filtering them, also it's not practical to do it for every option at a time :
var line='';
$('#selectLine').on('change', function () {
console.log( "line= "+this.value );
line=this.value;
if (line == "L1"){
var elemf = station.filter(i => i[2]="L1");
console.log(elemf);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Ligne</h4>
<select id="selectLine">
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L5">L5</option>
<option value="L6">L6</option>
<option value="L7">L7</option>
<option value="L9">L9</option>
<option value="L10">L10</option>
<option value="L11">L11</option>
<option value="L12">L12</option>
<option value="L13">L13</option>
<option value="L14">L14</option>
<option value="L15">L15</option>
<option value="L16">L16</option>
<option value="L17">L17</option>
<option value="L18">L18</option>
<option value="L19">L19</option>
<option value="L20">L20</option>
<option value="L21">L21</option>
<option value="L66">L66</option>
<option value="L32">L32</option>
</select>
<h4>Station départ</h4>
<select id="selecObject1"></select>
<h4>Station arrivée</h4>
<select id="selecObject2"></select>
<script>
var station = [
[0, 'JAMAA EL FNA', 'L1'],
[1, 'KOUTOUBIA', 'L1'],
[2, 'HOTEL DE VILLE', 'L1'],
[3, 'R.P BERDII', 'L1'],
[4, 'GRAND POSTE', 'L1'],
[5, 'CAREE EDEN', 'L1'],
[6, 'PL ABDELMOUMEN', 'L1'],
[7, 'PLACE D ARMES', 'L1'],
[8, 'FST', 'L1'],
[9, 'SEMIRAMIS', 'L1'],
[10, 'DR KUDIA', 'L1'],
[11, 'MCDO', 'L1'],
[12, 'CAFE AMINE', 'L1'],
[13, 'FAC SEMLALIA', 'L1'],
[14, 'ROUIDATE', 'L1'],
[15, 'CLUB MINISTRE JUSTICE', 'L1'],
[16, 'BEN TBIB', 'L1'],
[17, 'ASWAK SALAM', 'L1'],
[18, 'BAB DOUKALA', 'L1'],
[19, 'JAMAA EL FNA', 'L2'],
[20, 'KOUTOUBIA', 'L2'],
[21, 'PH KOUTOUBIA', 'L2'],
[22, 'RIAD SHEBA', 'L2'],
[23, 'DAR LBACHA', 'L2'],
[24, 'RIAD LAAROUSSE', 'L2'],
[25, 'BAB TAGHZOUT', 'L2'],
[26, 'BIN LMAASAR', 'L2'],
[27, 'ARSET EL MELLAK', 'L2'],
[28, 'HOPITAL ANTAKI', 'L2'],
[29, 'AVENUE ANTAKI', 'L2'],
[30, 'QCHICH', 'L2'],
[31, 'RUE BAB KHACHICH', 'L2'],
[32, 'AIN ITTI', 'L2']
];
var line = '';
$('#selectLine').on('change', function() {
console.log("line= " + this.value);
line = this.value;
if (line == "L1") {
var elemf = station.filter(i => i[2] = "L1");
console.log(elemf);
}
});
for (var i = 0; i < station.length; i++) {
var opText = "<option value='" + station[i][0] + "'>" + station[i][1] + " - " + station[i][2] + "</option>";
$("#selecObject1").append(opText);
}
for (var i = 0; i < station.length; i++) {
var opText2 = "<option value='" + station[i][0] + "'>" + station[i][1] + " - " + station[i][2] + "</option>";
$("#selecObject2").append(opText2);
}
var gval1 = '';
$('#selecObject1').on('change', function() {
console.log("val1= " + this.value);
gval1 = this.value;
});
var gval2 = '';
$('#selecObject2').on('change', function() {
console.log("val2= " + this.value);
gval2 = this.value;
});
</script>
<script>
var res = '';
var cells = '';
$('#btn').click(function() {
if ((gval1 != -1) && (gval2 != -1)) {
var res = station.filter(i => i[0] >= gval1 && i[0] <= gval2);
cells = '<tr><td>' + res.join('</td></tr><tr><td>') + '</td></tr>';
console.log(cells);
} else {
cells = "Veuillez choisir deux stations !";
}
document.getElementById("Tableau").innerHTML = cells;
});
</script>

The example below filters the second dropdown based on the value on the first one:
var station = [
[0, 'JAMAA EL FNA', 'L1'],
[1, 'KOUTOUBIA', 'L1'],
[2, 'HOTEL DE VILLE', 'L1'],
[3, 'R.P BERDII', 'L1'],
[4, 'GRAND POSTE', 'L1'],
[5, 'CAREE EDEN', 'L1'],
[6, 'PL ABDELMOUMEN', 'L1'],
[7, 'PLACE D ARMES', 'L1'],
[8, 'FST', 'L1'],
[9, 'SEMIRAMIS', 'L1'],
[10, 'DR KUDIA', 'L1'],
[11, 'MCDO', 'L1'],
[12, 'CAFE AMINE', 'L1'],
[13, 'FAC SEMLALIA', 'L1'],
[14, 'ROUIDATE', 'L1'],
[15, 'CLUB MINISTRE JUSTICE', 'L1'],
[16, 'BEN TBIB', 'L1'],
[17, 'ASWAK SALAM', 'L1'],
[18, 'BAB DOUKALA', 'L1'],
[19, 'JAMAA EL FNA', 'L2'],
[20, 'KOUTOUBIA', 'L2'],
[21, 'PH KOUTOUBIA', 'L2'],
[22, 'RIAD SHEBA', 'L2'],
[23, 'DAR LBACHA', 'L2'],
[24, 'RIAD LAAROUSSE', 'L2'],
[25, 'BAB TAGHZOUT', 'L2'],
[26, 'BIN LMAASAR', 'L2'],
[27, 'ARSET EL MELLAK', 'L2'],
[28, 'HOPITAL ANTAKI', 'L2'],
[29, 'AVENUE ANTAKI', 'L2'],
[30, 'QCHICH', 'L2'],
[31, 'RUE BAB KHACHICH', 'L2'],
[32, 'AIN ITTI', 'L2']
];
function updateSelObj1() {
var line = $('#selectLine').val();
$('#selectObject1')[0].length = 0;
for (var i = 0; i < station.length; i++) {
if (station[i][2] != line)
continue;
var opText = "<option value='" + station[i][0] + "'>" +
station[i][1] + " - " + station[i][2] +
"</option>";
$("#selectObject1").append(opText);
}
}
$('#selectLine').on('change', updateSelObj1);
updateSelObj1();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectLine">
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L5">L5</option>
<option value="L6">L6</option>
<option value="L7">L7</option>
<option value="L9">L9</option>
<option value="L10">L10</option>
<option value="L11">L11</option>
<option value="L12">L12</option>
<option value="L13">L13</option>
<option value="L14">L14</option>
<option value="L15">L15</option>
<option value="L16">L16</option>
<option value="L17">L17</option>
<option value="L18">L18</option>
<option value="L19">L19</option>
<option value="L20">L20</option>
<option value="L21">L21</option>
<option value="L66">L66</option>
<option value="L32">L32</option>
</select>
<select id="selectObject1"></select>
You can implement the third select similarly. The idea is:
get the selected value: var line = $('#selectLine').val();
clear the dropdown: $('#selectObject1')[0].length = 0;
re-add with for, skipping the ones you want filtered out: if (station[i][2] != line) continue;

Chained Select via .filter (with Vue)
What you want is to use functional programming to avoid sifting through each value manually in a for loop. For this, I suggest using .filter, and to avoid a for loop for generating the select use .map or Vue.js
Here is an example
<div id="app">
<h4>Ligne</h4>
<select id="selectLine" v-model='selectedLine'>
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L5">L5</option>
<option value="L6">L6</option>
<option value="L7">L7</option>
<option value="L9">L9</option>
<option value="L10">L10</option>
<option value="L11">L11</option>
<option value="L12">L12</option>
<option value="L13">L13</option>
<option value="L14">L14</option>
<option value="L15">L15</option>
<option value="L16">L16</option>
<option value="L17">L17</option>
<option value="L18">L18</option>
<option value="L19">L19</option>
<option value="L20">L20</option>
<option value="L21">L21</option>
<option value="L66">L66</option>
<option value="L32">L32</option>
</select>
<select>
<option v-for='station in filteredStations()' v-bind:value='station[0]' v-text="station[1] + '-' + station[2]">
</option>
</select>
</div>
JavaScript
new Vue({
el: "#app",
data: {
stations: [
[0,'JAMAA EL FNA','L1'],
[1,'KOUTOUBIA','L1'],
[2,'HOTEL DE VILLE','L1'],
[3,'R.P BERDII','L1'],
[4,'GRAND POSTE','L1'],
[5,'CAREE EDEN','L1'],
[6,'PL ABDELMOUMEN','L1'],
[7,'PLACE D ARMES','L1'],
[8,'FST','L1'],
[9,'SEMIRAMIS','L1'],
[10,'DR KUDIA','L1'],
[11,'MCDO','L1'],
[12,'CAFE AMINE','L1'],
[13,'FAC SEMLALIA','L1'],
[14,'ROUIDATE','L1'],
[15,'CLUB MINISTRE JUSTICE','L1'],
[16,'BEN TBIB','L1'],
[17,'ASWAK SALAM','L1'],
[18,'BAB DOUKALA','L1'],
[19,'JAMAA EL FNA','L2'],
[20,'KOUTOUBIA','L2'],
[21,'PH KOUTOUBIA','L2'],
[22,'RIAD SHEBA','L2'],
[23,'DAR LBACHA','L2'],
[24,'RIAD LAAROUSSE','L2'],
[25,'BAB TAGHZOUT','L2'],
[26,'BIN LMAASAR','L2'],
[27,'ARSET EL MELLAK','L2'],
[28,'HOPITAL ANTAKI','L2'],
[29,'AVENUE ANTAKI','L2'],
[30,'QCHICH','L2'],
[31,'RUE BAB KHACHICH','L2'],
[32,'AIN ITTI','L2']
],
selectedLine: '',
filteredStations() {
return this.stations.filter(station => station[2] === this.selectedLine)
}
}
})

So I did some tweaks and I think this is what you want to accomplish. Comments added to explain some logic behind it.
var station = [
[0, 'JAMAA EL FNA', 'L1'],
[1, 'KOUTOUBIA', 'L1'],
[2, 'HOTEL DE VILLE', 'L1'],
[3, 'R.P BERDII', 'L1'],
[4, 'GRAND POSTE', 'L1'],
[5, 'CAREE EDEN', 'L1'],
[6, 'PL ABDELMOUMEN', 'L1'],
[7, 'PLACE D ARMES', 'L1'],
[8, 'FST', 'L1'],
[9, 'SEMIRAMIS', 'L1'],
[10, 'DR KUDIA', 'L1'],
[11, 'MCDO', 'L1'],
[12, 'CAFE AMINE', 'L1'],
[13, 'FAC SEMLALIA', 'L1'],
[14, 'ROUIDATE', 'L1'],
[15, 'CLUB MINISTRE JUSTICE', 'L1'],
[16, 'BEN TBIB', 'L1'],
[17, 'ASWAK SALAM', 'L1'],
[18, 'BAB DOUKALA', 'L1'],
[19, 'JAMAA EL FNA', 'L2'],
[20, 'KOUTOUBIA', 'L2'],
[21, 'PH KOUTOUBIA', 'L2'],
[22, 'RIAD SHEBA', 'L2'],
[23, 'DAR LBACHA', 'L2'],
[24, 'RIAD LAAROUSSE', 'L2'],
[25, 'BAB TAGHZOUT', 'L2'],
[26, 'BIN LMAASAR', 'L2'],
[27, 'ARSET EL MELLAK', 'L2'],
[28, 'HOPITAL ANTAKI', 'L2'],
[29, 'AVENUE ANTAKI', 'L2'],
[30, 'QCHICH', 'L2'],
[31, 'RUE BAB KHACHICH', 'L2'],
[32, 'AIN ITTI', 'L2']
];
var line = '';
var res = '';
var cells = '';
var gval1 = '';
var gval2 = '';
filterLines();
$('#selectLine').on('change', function() {
filterLines();
});
function filterLines() {
//Clear Filtered Lists each time we filter
document.getElementById('selecObject1').innerHTML = "";
document.getElementById('selecObject2').innerHTML = "";
line = document.getElementById('selectLine').value;
var elemf = station.filter(i => i[2] === line);
//Use filtered list (elemf) to take values from
for (var i = 0; i < elemf.length; i++) {
var opText = "<option value='" + elemf[i][0] + "'>" + elemf[i][1] + " - " + elemf[i][2] + "</option>";
$("#selecObject1").append(opText);
}
for (var i = 0; i < elemf.length; i++) {
var opText2 = "<option value='" + elemf[i][0] + "'>" + elemf[i][1] + " - " + elemf[i][2] + "</option>";
$("#selecObject2").append(opText2);
}
}
$('#selecObject1').on('change', function() {
console.log("val1= " + this.value);
gval1 = this.value;
});
$('#selecObject2').on('change', function() {
console.log("val2= " + this.value);
gval2 = this.value;
});
$('#btn').click(function() {
if ((gval1 != -1) && (gval2 != -1)) {
var res = station.filter(i => i[0] >= gval1 && i[0] <= gval2);
cells = '<tr><td>' + res.join('</td></tr><tr><td>') + '</td></tr>';
console.log(cells);
} else {
cells = "Veuillez choisir deux stations !";
}
document.getElementById("Tableau").innerHTML = cells;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Ligne</h4>
<select id="selectLine">
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L5">L5</option>
<option value="L6">L6</option>
<option value="L7">L7</option>
<option value="L9">L9</option>
<option value="L10">L10</option>
<option value="L11">L11</option>
<option value="L12">L12</option>
<option value="L13">L13</option>
<option value="L14">L14</option>
<option value="L15">L15</option>
<option value="L16">L16</option>
<option value="L17">L17</option>
<option value="L18">L18</option>
<option value="L19">L19</option>
<option value="L20">L20</option>
<option value="L21">L21</option>
<option value="L66">L66</option>
<option value="L32">L32</option>
</select>
<h4>Station départ</h4>
<select id="selecObject1"></select>
<h4>Station arrivée</h4>
<select id="selecObject2"></select>

Sort jQuery Ajax Json forEach data by date

I'm getting my data from a JSON file. But my code read and append it as it's written in the file I'd like to sort the data by date.
I tryed this : but doesn't work =/
$('.1article').sort(function (a, b) {
var contentA =parseInt( $(a).attr('data-date'));
var contentB =parseInt( $(b).attr('data-date'));
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
})
My Ajax code
$(document).ready(function() {
function imgError(image) {
image.onerror = "";
image.src = "img/S0-voiture-de-l-annee-2017-les-sept-finalistes-nos-pronostics-391613.jpg";
return true;
}
$.ajax({
type: "GET",
url: 'http://s604712774.onlinehome.fr/videdressing/text.json',
dataType: 'json',
success: function(data) {
data.forEach(function(post) {
var fds = new Date(post.date) ;
var datetimeposted = new Date(post.date);
var datetime = datetimeposted.getDate() + "/" + (datetimeposted.getMonth()+1) + "/" + datetimeposted.getFullYear();
var currentdate = new Date();
var now = new Date(currentdate.getFullYear() + ", " + ( '0' +(currentdate.getMonth()+1)).slice( -2 ) + ", " + ( '0' +currentdate.getDate()));
var result = (now - fds) ;
var days = result / 1000 / 60 / 60 / 24 ;
if ("14" < days) {
$(".id" + post.id).css('display','none');
};
$( '.articles' ).prepend( ' <div class="1article col s12 m6 l4 id' + post.id + '" data-date="' + fds +'"> <div class="card"> <div class="card-content"> <span class="titlevente activator grey-text text-darken-4 titlevente">' + post.title +'</span><br><span class="titlevente activator grey-text text-darken-4 titlevente" style="font-size:10px !important;">' + post.category +' | ' + datetime +'</span> </div><div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="img/S0-voiture-de-l-annee-2017-les-sept-finalistes-nos-pronostics-391613.jpg"> </div><div class="card-content"> <span class="metadesc activator grey-text text-darken-4">' + post.ville +' | ' + post.prix +'€<i class="material-icons right">more_vert</i></span> </div><div class="card-reveal"> <span class="card-title grey-text text-darken-4">' + post.title +'<i class="material-icons right">close</i></span> <p>' + post.decription +'</p><div class="incarddata"> <i id="delete" class="material-icons h32"></i> <i class="material-icons h32">share</i> <i class="material-icons h32"></i> <i class="material-icons h32"></i> </div></div></div></div>' );
});
}
});
});
You can look it up here -> https://jsfiddle.net/ds77bmu9/1/

I edited your fiddle, you had to sort the array before iterating through it. Also, your sorting function was not right (In javascript you can simply subtract dates with - ):
success: function(data) {
data.sort(function(a, b) {
return new Date(b.date) - new Date(a.date);
})
foreach(data : ...)
}
here is your fiddle fixed. https://jsfiddle.net/ds77bmu9/3/

How to fetch particular record from XML dataset based on dropdown selection in javascript

XML FILE:
ss.xml
There are 12k records in xml file
<record id="R1">
<Imgpath>GR8138K-SS.jpg</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<Attribute2>3 Row Band</Attribute2>
<DiamondWeightRange>0.96 - 1.10 cts</DiamondWeightRange>
<CenterStoneWeightRange> </CenterStoneWeightRange>
<CenterShape> </CenterShape>
<SideShape> </SideShape>
<CenterSetting> </CenterSetting>
<Finishes>Satin</Finishes>
<SearchStyleNo>GR8138K-SS</SearchStyleNo>
<Month>June</Month>
<Year>2009</Year>
<TotalWeight>1.02</TotalWeight>
<CenterStWeight> </CenterStWeight>
</record>
<record id="R2">
<Imgpath>GR8138K-SS.jpg</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Ladies Ring</ProductCategory>
<SubCategory>Wedding Band</SubCategory>
<Attribute2> </Attribute2>
<DiamondWeightRange>0.29 - 0.35 cts</DiamondWeightRange>
<CenterStoneWeightRange> </CenterStoneWeightRange>
<CenterShape> </CenterShape>
<SideShape> </SideShape>
<CenterSetting> </CenterSetting>
<Finishes> </Finishes>
<SearchStyleNo>GMR048F-W</SearchStyleNo>
<Month>July</Month>
<Year>2008</Year>
<TotalWeight>0.3</TotalWeight>
<CenterStWeight> </CenterStWeight>
</record>
<record id="R3">
<Imgpath>GRB728K-W.JPG</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<DiamondWeightRange>0.96 - 1.10 cts</DiamondWeightRange>
<CenterShape>Round</CenterShape>
<SearchStyleNo>GRB728K-W</SearchStyleNo>
<Month>August</Month>
<Year>2008</Year>
<TotalWeight>0.97</TotalWeight>
</record>
<record id="R4">
<Imgpath>GRF001D-X.jpg</Imgpath>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<Attribute2>7 Stone Band, Combination of Metal</Attribute2>
<DiamondWeightRange>0.16 - 0.18 cts</DiamondWeightRange>
<CenterShape>Round</CenterShape>
<Finishes>Satin</Finishes>
<SearchStyleNo>GRF001D-X</SearchStyleNo>
<Month>September</Month>
<Year>2008</Year>
<TotalWeight>0.18</TotalWeight>
</record>
JavaScript:
To load xml data
<script type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
async: false
xhttp.open("GET", dname, false);
xhttp.send();
return xhttp.responseXML;
}
$(document).ready(function () {
try {
xmlDoc = loadXMLDoc("ss.xml");
x = xmlDoc.getElementsByTagName("record");
//For every element, loop
var col = 4;
var total = x.length;
var row = Math.ceil(x.length / 4);
var table = $('<table></table>');
for (r = 0; r <= row; r++) {
var rowtr = $('<tr></tr>');
var t = 0;
if (r == 0) {
t == r;
}
else {
var t = (r * 4) + 1;
}
if (total - t >= col) {
col = 4;
}
else {
col = total - t;
}
for (c = 0; c < col; c++) {
var imgpath = xmlDoc.getElementsByTagName("Imgpath")[t].childNodes[0].nodeValue;
var exc = xmlDoc.getElementsByTagName("Exclusives")[t].childNodes[0].nodeValue;
var coll = xmlDoc.getElementsByTagName("Collection")[t].childNodes[0].nodeValue;
// alert(coll);
var Pcat = xmlDoc.getElementsByTagName("ProductCategory")[t].childNodes[0].nodeValue;
var Scat = xmlDoc.getElementsByTagName("SubCategory")[t].childNodes[0].nodeValue;
var Att = xmlDoc.getElementsByTagName("Attribute2")[t].childNodes[0].nodeValue;
var DiaWtRange = xmlDoc.getElementsByTagName("DiamondWeightRange")[t].childNodes[0].nodeValue;
var CenStoneRange = xmlDoc.getElementsByTagName("CenterStoneWeightRange")[t].childNodes[0].nodeValue;
var CenShape = xmlDoc.getElementsByTagName("CenterShape")[t].childNodes[0].nodeValue;
var SShape = xmlDoc.getElementsByTagName("SideShape")[t].childNodes[0].nodeValue;
var CenSetting = xmlDoc.getElementsByTagName("CenterSetting")[t].childNodes[0].nodeValue;
var Fin = xmlDoc.getElementsByTagName("Finishes")[t].childNodes[0].nodeValue;
var SSNo = xmlDoc.getElementsByTagName("SearchStyleNo")[t].childNodes[0].nodeValue;
var Mon = xmlDoc.getElementsByTagName("Month")[t].childNodes[0].nodeValue;
var Yr = xmlDoc.getElementsByTagName("Year")[t].childNodes[0].nodeValue;
var TotWeight = xmlDoc.getElementsByTagName("TotalWeight")[t].childNodes[0].nodeValue;
var CenStWeight = xmlDoc.getElementsByTagName("CenterStWeight")[t].childNodes[0].nodeValue;
rowtr.append('<td><img src="' + imgpath + '" height="200px" width="200px" class="zoom_img"/><br/> Style No: ' + SSNo + '<br/> Product: ' + Pcat + '<br/> Category: ' + Scat + '<br/> Center stone weight: ' + CenStWeight + '<br/> Total weight: ' + TotWeight + '<br/>' + '<input type="button" value="Add to Selection" style="border-radius: 5px;" onclick="' + AddtoCart(imgpath, exc, coll, Pcat, Scat, Att, DiaWtRange, CenStoneRange, CenShape, SShape, CenSetting, Fin, SSNo, Mon, Yr, TotWeight, CenStWeight) + '"class="cart"/> </td>');
t = t + 1;
};
table.append(rowtr);
};
$('#dvContent').append(table);
} catch (e) {
alert(e.message);
}
});
</script>
Html :
Here is dropdown shape.
when we select value "Oval", it filters xml dataset and display those record having center shape "Oval". similarly for other filters.
simply filters the record based on particular tagname.
<select class="form-control" id="DdlCshape">
<option value=""> Select Center Shape </option>
<option value="Baguette"> Baguette </option>
<option value="Cushion"> Cushion </option>
<option value="Emerald"> Emerald </option>
<option value="Marquise"> Marquise </option>
<option value="Oval"> Oval </option>
<option value="Pear"> Pear </option>
<option value="Princess"> Princess </option>
<option value="Radiant"> Radiant </option>
<option value="Round"> Round </option>
<option value="Tapper"> Tapper </option>
</select>
<select class="form-control" id="DdlCSWeight>
<option value="">Select Center Stone Weight Range </option>
<option value="0.01 - 0.05 cts">0.01 - 0.05 cts</option>
<option value="0.11 - 0.15 cts">0.11 - 0.15 cts</option>
<option value="0.19 - 0.22 cts">0.19 - 0.22 cts</option>
<option value="0.23 - 0.28 cts">0.23 - 0.28 cts</option>
<option value="0.29 - 0.35 cts">0.29 - 0.35 cts</option>
<option value="0.36 - 0.45 cts">0.36 - 0.45 cts</option>
<option value="0.46 - 0.55 cts">0.46 - 0.55 cts</option>
<option value="0.56 - 0.65 cts">0.56 - 0.65 cts</option>
<option value="0.66 - 0.78 cts">0.66 - 0.78 cts</option>
<option value="0.96 - 1.10 cts">0.96 - 1.10 cts</option>
</select>
<select class="form-control" id="DdlWeight_Range">
<option value=""> Select Diamond Weight Range </option>
<option value="0.01 - 0.05 cts">0.01 - 0.05 cts</option>
<option value="0.11 - 0.15 cts">0.11 - 0.15 cts</option>
<option value="0.19 - 0.22 cts">0.19 - 0.22 cts</option>
<option value="0.23 - 0.28 cts">0.23 - 0.28 cts</option>
<option value="0.29 - 0.35 cts">0.29 - 0.35 cts</option>
<option value="0.36 - 0.45 cts">0.36 - 0.45 cts</option>
<option value="0.46 - 0.55 cts">0.46 - 0.55 cts</option>
<option value="0.56 - 0.65 cts">0.56 - 0.65 cts</option>
<option value="0.66 - 0.78 cts">0.66 - 0.78 cts</option>
<option value="0.96 - 1.10 cts">0.96 - 1.10 cts</option>
<option value="1.11 - 1.78 cts">1.11 - 1.78 cts</option>
<option value="1.79 - 2.10 cts">1.79 - 2.10 cts</option>
<option value="2.29 - 2.78 cts">2.29 - 2.78 cts</option>
</select>

How to do a javascript function for autocomplete with images?

I'm trying to do a function that returns a list of search with autocomplete. I have to use a . The final result must be something like this:
http://www.casimages.com.br/i/150325064429419254.png.html
I have done this another autocomplete
html
<label class="formee-lbl">
Região Fiscal
</label>
Js:
<script type="text/javascript">
var availableTags = [
"DFR - SÃO JOSÉ DOS CAMPOS",
"DFR - ARARAGUARA",
"DFR - FRANCA",
"DFR - JUNDIAI",
"DFR - PIRACICABA",
"DFR - BARUERI",
"DERPF - SÃO PAULO",
"DFR - CURITIBA",
"DFR - LONDRINA",
"DFR - CASCAVEL"
];
var availableUnidades = [
"UNIDADE: DFR - SÃO JOSÉ DOS CAMPOS",
"UNIDADE: DFR - ARARAGUARA",
"UNIDADE: DFR - FRANCA",
"UNIDADE: DFR - JUNDIAI",
"UNIDADE: DFR - PIRACICABA",
"UNIDADE: DFR - BARUERI",
"UNIDADE: DERPF - SÃO PAULO",
"UNIDADE: DFR - CURITIBA",
"UNIDADE: DFR - LONDRINA",
"UNIDADE: DFR - CASCAVEL"
];
$(document).ready(function () {//Carrega a função junto com a página
$("#autocomplete").autocomplete({
source: availableTags
});
$("#autocompleteUnidades").autocomplete({
source: availableUnidades
});
});
</script>
What I have to do to add any image to the autocomplete function?
Is there something else I can use?

With jQuery you can write your own renderers
$(document).ready(function () {
//...here is the projects source
$("#autocomplete").autocomplete({
source: availableTags,
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $('<li>')
.append('<a><img src="'+ item.image +'">' + item.label + '<br>' + item.value + '</a>')
.appendTo(ul);
};
}
});
});