L.Geojson.ajax get multiple information in one point - ajax

Question

I am building a web platform using HTML, CSS and Javascript. I used geojson data to spatially present the data. The geojson file is a point file with 11 points; however, each point have multiple rows in attribute table. I want to present the multiple information in the form of popup in the web platform.
My geojson file is like this (a part of it):
{
"type": "FeatureCollection",
"name": "spectral_library",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "ID": 1.0, "Sample_nr": "INOV01", "Spectrum_n": "INOV01_1", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602939.04, "Latitude": 4606832.31, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "White and yellowish", "Face_type": "Exposed", "Photo": "INOV01_1.jpg", "Raw_Spectr": "INOV01_1", "Processed_": "INOV01_1_CR", "Spectra_ab": "INOV01_1_abs_1.png", "Spectra__1": "INOV01_1_abs_2", "Spectra__2": "INOV01_1_abs_3", "Spectra__3": "INOV01_1_abs_4", "Spectra__4": "INOV01_1_abs_5", "Spectral_m": "Sericite/white mica" }, "geometry": { "type": "Point", "coordinates": [ -7.764631355723165, 41.606567474499826 ] } },
{ "type": "Feature", "properties": { "ID": 2.0, "Sample_nr": "INOV01", "Spectrum_n": "INOV01_2", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602939.04, "Latitude": 4606832.31, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "White", "Face_type": "Exposed", "Photo": "INOV01_2.jpg", "Raw_Spectr": "INOV01_2", "Processed_": "INOV01_2_CR", "Spectra_ab": "INOV01_2_abs_1", "Spectra__1": "INOV01_2_abs_2", "Spectra__2": "INOV01_2_abs_3", "Spectra__3": "INOV01_2_abs_4", "Spectra__4": "INOV01_2_abs_5", "Spectral_m": "Sericite/white mica; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764631355723165, 41.606567474499826 ] } },
{ "type": "Feature", "properties": { "ID": 3.0, "Sample_nr": "INOV01", "Spectrum_n": "INOV01_3", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602939.04, "Latitude": 4606832.31, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Yellowish and white", "Face_type": "Exposed", "Photo": "INOV01_3.jpg", "Raw_Spectr": "INOV01_3", "Processed_": "INOV01_3_CR", "Spectra_ab": "INOV01_3_abs_1", "Spectra__1": "INOV01_3_abs_2", "Spectra__2": "INOV01_3_abs_3", "Spectra__3": "INOV01_3_abs_4", "Spectra__4": "INOV01_3_abs_5", "Spectral_m": "Sericite/white mica; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764631355723165, 41.606567474499826 ] } },
{ "type": "Feature", "properties": { "ID": 4.0, "Sample_nr": "INOV01", "Spectrum_n": "INOV01_4", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602939.04, "Latitude": 4606832.31, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Black and white", "Face_type": "Exposed", "Photo": "INOV01_4.jpg", "Raw_Spectr": "INOV01_4", "Processed_": "INOV01_4_CR", "Spectra_ab": "INOV01_4_abs_1", "Spectra__1": "INOV01_4_abs_2", "Spectra__2": "INOV01_4_abs_3", "Spectra__3": "INOV01_4_abs_4", "Spectra__4": "INOV01_4_abs_5", "Spectral_m": "Smectite mineral (probable montmorillonite) mixed with cookeite; detected Fe2+ in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764631355723165, 41.606567474499826 ] } },
{ "type": "Feature", "properties": { "ID": 5.0, "Sample_nr": "INOV01", "Spectrum_n": "INOV01_5", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602939.04, "Latitude": 4606832.31, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "White and brown", "Face_type": "Exposed", "Photo": "INOV01_5.jpg", "Raw_Spectr": "INOV01_5", "Processed_": "INOV01_5_CR", "Spectra_ab": "INOV01_5_abs_1.png", "Spectra__1": "INOV01_5_abs_2.png", "Spectra__2": "INOV01_5_abs_3.png", "Spectra__3": "INOV01_5_abs_4.png", "Spectra__4": "INOV01_5_abs_5", "Spectral_m": "Sericite/white mica" }, "geometry": { "type": "Point", "coordinates": [ -7.764631355723165, 41.606567474499826 ] } },
{ "type": "Feature", "properties": { "ID": 6.0, "Sample_nr": "INOV02", "Spectrum_n": "INOV02_1", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602941.58, "Latitude": 4606824.22, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Yellowish", "Face_type": "Exposed", "Photo": "INOV02_1.jpg", "Raw_Spectr": "INOV02_1", "Processed_": "INOV02_1_CR", "Spectra_ab": "INOV02_1_abs_1", "Spectra__1": "INOV02_1_abs_2", "Spectra__2": "INOV02_1_abs_3", "Spectra__3": "INOV02_1_abs_4", "Spectra__4": "INOV02_1_abs_5", "Spectral_m": "White mica" }, "geometry": { "type": "Point", "coordinates": [ -7.764602270005769, 41.60649429499442 ] } },
{ "type": "Feature", "properties": { "ID": 7.0, "Sample_nr": "INOV02", "Spectrum_n": "INOV02_2", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz- Iron Oxide", "WGS84_Zone": "29N", "Longitude": 602941.58, "Latitude": 4606824.22, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "White, black and yellowish", "Face_type": "Exposed", "Photo": "INOV02_2.jpg", "Raw_Spectr": "INOV02_2", "Processed_": "INOV02_2_CR", "Spectra_ab": "INOV02_2_abs_1", "Spectra__1": "INOV02_2_abs_2", "Spectra__2": "INOV02_2_abs_3", "Spectra__3": null, "Spectra__4": null, "Spectral_m": "Illite (possibly mixed with montmorillonite)" }, "geometry": { "type": "Point", "coordinates": [ -7.764602270005769, 41.60649429499442 ] } },
{ "type": "Feature", "properties": { "ID": 8.0, "Sample_nr": "INOV02", "Spectrum_n": "INOV02_3", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz- Iron Oxide", "WGS84_Zone": "29N", "Longitude": 602941.58, "Latitude": 4606824.22, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Yellowish", "Face_type": "Exposed", "Photo": "INOV02_3.jpg", "Raw_Spectr": "INOV02_3", "Processed_": "INOV02_3_CR", "Spectra_ab": "INOV02_3_abs_1", "Spectra__1": "INOV02_3_abs_2", "Spectra__2": "INOV02_3_abs_3", "Spectra__3": "INOV02_3_abs_4", "Spectra__4": "INOV02_3_abs_5", "Spectral_m": "White mica; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764602270005769, 41.60649429499442 ] } },
{ "type": "Feature", "properties": { "ID": 9.0, "Sample_nr": "INOV02", "Spectrum_n": "INOV02_4", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz- Iron Oxide", "WGS84_Zone": "29N", "Longitude": 602941.58, "Latitude": 4606824.22, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Yellowish and black", "Face_type": "Exposed", "Photo": "INOV02_4.jpg", "Raw_Spectr": "INOV02_4.jpg", "Processed_": "INOV02_4_CR", "Spectra_ab": "INOV02_4_abs_1", "Spectra__1": "INOV02_4_abs_2", "Spectra__2": "INOV02_4_abs_3", "Spectra__3": "INOV02_4_abs_4", "Spectra__4": null, "Spectral_m": "Sericite/white mica; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764602270005769, 41.60649429499442 ] } },
{ "type": "Feature", "properties": { "ID": 10.0, "Sample_nr": "INOV03", "Spectrum_n": "INOV03_1", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz- Iron Oxide", "WGS84_Zone": "29N", "Longitude": 602947.62, "Latitude": 4606814.53, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Yellowish and black", "Face_type": "Exposed", "Photo": "INOV03_1.jpg", "Raw_Spectr": "INOV03_1", "Processed_": "INOV03_1_CR", "Spectra_ab": "INOV03_1_abs_1", "Spectra__1": "INOV03_1_abs_2", "Spectra__2": "INOV03_1_abs_3", "Spectra__3": "INOV03_1_abs_4", "Spectra__4": null, "Spectral_m": "Montmorillonite mixed with illite and/or kandite group mineral; detected Fe3+ in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764531465344857, 41.606406255838571 ] } },
{ "type": "Feature", "properties": { "ID": 11.0, "Sample_nr": "INOV03", "Spectrum_n": "INOV03_2", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602947.62, "Latitude": 4606814.53, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Brown and white", "Face_type": "Exposed", "Photo": "INOV03_2.jpg", "Raw_Spectr": "INOV03_2", "Processed_": "INOV03_2_CR", "Spectra_ab": "INOV03_2_abs_1", "Spectra__1": "INOV03_2_abs_2", "Spectra__2": "INOV03_2_abs_3", "Spectra__3": "INOV03_2_abs_4", "Spectra__4": null, "Spectral_m": "Illite mixed with kandite group mineral; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764531465344857, 41.606406255838571 ] } },
{ "type": "Feature", "properties": { "ID": 12.0, "Sample_nr": "INOV03", "Spectrum_n": "INOV03_3", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602947.62, "Latitude": 4606814.53, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Gray", "Face_type": "Exposed", "Photo": "INOV03_3.jpg", "Raw_Spectr": "INOV03_3", "Processed_": "INOV03_3_CR", "Spectra_ab": "INOV03_3_abs_1", "Spectra__1": "INOV03_3_abs_2", "Spectra__2": "INOV03_3_abs_3", "Spectra__3": null, "Spectra__4": null, "Spectral_m": "Illite mixed with kandite group mineral; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764531465344857, 41.606406255838571 ] } },
{ "type": "Feature", "properties": { "ID": 13.0, "Sample_nr": "INOV04", "Spectrum_n": "INOV04_1", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602957.46, "Latitude": 4606801.99, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Brown and white", "Face_type": "Exposed", "Photo": "INOV04_1.jpg", "Raw_Spectr": "INOV04_1", "Processed_": "INOV04_1_CR", "Spectra_ab": "INOV04_1_abs_1", "Spectra__1": "INOV04_1_abs_2", "Spectra__2": "INOV04_1_abs_3", "Spectra__3": "INOV04_1_abs_4", "Spectra__4": null, "Spectral_m": "Illite mixed with kandite group mineral; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764415557280173, 41.606292061781438 ] } },
{ "type": "Feature", "properties": { "ID": 14.0, "Sample_nr": "INOV04", "Spectrum_n": "INOV04_2", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602957.46, "Latitude": 4606801.99, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "White and black", "Face_type": "Exposed", "Photo": "INOV04_2.jpg", "Raw_Spectr": "INOV04_2", "Processed_": "INOV04_2_CR", "Spectra_ab": "INOV04_2_abs_1", "Spectra__1": "INOV04_2_abs_2", "Spectra__2": "INOV04_2_abs_3", "Spectra__3": null, "Spectra__4": null, "Spectral_m": "White mica/illite mixed with orthoclase; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764415557280173, 41.606292061781438 ] } },
{ "type": "Feature", "properties": { "ID": 15.0, "Sample_nr": "INOV04", "Spectrum_n": "INOV04_3", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz- Iron Oxide", "WGS84_Zone": "29N", "Longitude": 602957.46, "Latitude": 4606801.99, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "White and black", "Face_type": "Exposed", "Photo": "INOV04_3.jpg", "Raw_Spectr": "INOV04_3", "Processed_": "INOV04_3_CR", "Spectra_ab": "INOV04_3_abs_1", "Spectra__1": "INOV04_3_abs_2", "Spectra__2": "INOV04_3_abs_3", "Spectra__3": null, "Spectra__4": null, "Spectral_m": "White mica/illite mixed with orthoclase; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764415557280173, 41.606292061781438 ] } },
{ "type": "Feature", "properties": { "ID": 16.0, "Sample_nr": "INOV04", "Spectrum_n": "INOV04_4", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz- Iron Oxide", "WGS84_Zone": "29N", "Longitude": 602957.46, "Latitude": 4606801.99, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Black and yellowish", "Face_type": "Exposed", "Photo": "INOV04_4.jpg", "Raw_Spectr": "INOV04_4", "Processed_": "INOV04_4_CR", "Spectra_ab": "INOV04_4_abs_1", "Spectra__1": "INOV04_4_abs_2", "Spectra__2": "INOV04_4_abs_3", "Spectra__3": "INOV04_4_abs_4", "Spectra__4": null, "Spectral_m": "Montmorillonite mixed with illite and possibly cookeite; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764415557280173, 41.606292061781438 ] } },
{ "type": "Feature", "properties": { "ID": 17.0, "Sample_nr": "INOV04", "Spectrum_n": "INOV04_5", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602957.46, "Latitude": 4606801.99, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "White", "Face_type": "Exposed", "Photo": "INOV04_5.jpg", "Raw_Spectr": "INOV04_5", "Processed_": "INOV04_5_CR", "Spectra_ab": "INOV04_5_abs_1", "Spectra__1": "INOV04_5_abs_2", "Spectra__2": null, "Spectra__3": null, "Spectra__4": null, "Spectral_m": "White mica/illite mixed with orthoclase; iron features in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764415557280173, 41.606292061781438 ] } },
{ "type": "Feature", "properties": { "ID": 18.0, "Sample_nr": "INOV04", "Spectrum_n": "INOV04_6", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602957.46, "Latitude": 4606801.99, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Rose", "Face_type": "Exposed", "Photo": "INOV04_6.jpg", "Raw_Spectr": "INOV04_6", "Processed_": "INOV04_6_CR", "Spectra_ab": "INOV04_6_abs_1", "Spectra__1": "INOV04_6_abs_2", "Spectra__2": "INOV04_6_abs_3", "Spectra__3": "INOV04_6_abs_4", "Spectra__4": null, "Spectral_m": "White mica/sericite mixed with chlorite (possibly cookeite ?); iron features in VNIR and SWIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764415557280173, 41.606292061781438 ] } },
{ "type": "Feature", "properties": { "ID": 19.0, "Sample_nr": "INOV05", "Spectrum_n": "INOV05_1", "Locality": "Portugal-Barroso", "Sample_des": "Aplite-Pegmatite/ muscovite, plagioclase, quartz", "WGS84_Zone": "29N", "Longitude": 602968.25, "Latitude": 4606790.88, "Preparatio": "drying at 50ºC", "Analysis": "ASD FieldSpec 4", "Stored": "UPORTO", "Face_color": "Gray and white", "Face_type": "Exposed", "Photo": "INOV05_1.jpg", "Raw_Spectr": "INOV05_1", "Processed_": "INOV05_1_CR", "Spectra_ab": "INOV05_1_abs_1", "Spectra__1": "INOV05_1_abs_2", "Spectra__2": "INOV05_1_abs_3", "Spectra__3": null, "Spectra__4": null, "Spectral_m": "Illite; detected Fe3+ in VNIR" }, "geometry": { "type": "Point", "coordinates": [ -7.764288005570608, 41.606190622497969 ] } },....
And until now I tested and the problem is that for the first point (as example) that have 5 rows in attribute table, it only reads the fifth row information. How do I get the other rows (1 to 4)?
lyrSpectral = L.geoJSON.ajax('data/spectral_library.geojson', {pointToLayer:returnVector}).addTo(mymap);
lyrSpectral.on('data:loaded', function() {
mymap.fitBounds(lyrSpectral.getBounds());
});
function returnVector(json, latlng){
var att = json.properties;
var Tab1content = '<p>ID: ' + att.ID + '</p><p>Sample Number: '+ att.Sample_nr + '</p><p>Spectrum Number: '+ att.Spectrum_n +'</p><p>Face Color: '+ att.Face_color +'</p><p>Face Type: '+ att.Face_type +'</p><p>Sample_description: '+ att.Sample_des+'</p><p>Spectral_m: '+ att.Spectral_m + + att.Spectral_m;
var content = '<div class="tabs" style="width: 400px; height: 300px">' +
'<div class="tab" id="tab-1">' +
'<div class="content">' +
'<b>'+Tab1content +'</b>' +
'</div>' +
'</div>' +
'<div class="tab" id="tab-2">' +
'<div class="content">' +
'<b>Tab 2 content</b>' +
'</div>' +
'</div>' +
'<div class="tab" id="tab-3">' +
'<div class="content">' +
'<b>Tab 3 content</b>' +
'</div>' +
'</div>' +
'<ul class="tabs-link">' +
'<li class="tab-link"> <span>'+att.ID+'</span></li>' +
'<li class="tab-link"> <span>ID2</span></li>' +
'<li class="tab-link"> <span>ID3</span></li>' +
'</ul>' +
'</div>';
return L.circleMarker(latlng, {radius:5, color:'blue'}).bindPopup(
content,{
maxWidth: "auto"
});
}
The result seems like this: