Ausgabe
Ich versuche, JSON-Daten zu erhalten und das Tabellenformat anzuzeigen. Es funktioniert jedoch wie erwartet, wenn ich den ersten Schlüssel / das erste Objekt (Überschrift) als Handbuch verwende.
Beispiel-JSON-Dateien für dasselbe:
Ich habe Probleme, da Benutzer JSON selbst mit unterschiedlicher
Struktur einbetten können.
- Wie kann ich meinen ersten Schlüssel basierend auf einer dynamischen JSON-URL ersetzen?
- Wie kann ich die Daten aus JSON abrufen, wenn in den JSON-Daten kein Pfeil vorhanden ist?
Arbeitsbeispiel: jsFiddle
JSON-Datei: https://amp.gmail.dev/playground/public/ssr_amp_list
Code:
var atd, atr, temp;
fetch('https://amp.gmail.dev/playground/public/ssr_amp_list')
.then((response) => response.json())
.then((data) => {
data.items.map(myList => {
var __keys = Object.keys(myList);
var __values = Object.values(myList);
$.each(__values, function(index,myList) {
atd = '<td>'+myList+'</td>'
atr += atd;
if((__keys.length) -1 == index){
temp+= '<tr>'+atr+'</tr>'
atr = '';
}
})
});
$('#data table').html(temp)
})
Eine weitere JSON-Datei : https://api.plos.org/search?q=title:DNA
Für die obige JSON-Datei muss ich den Code wie folgt ändern:
data.site.docs.map(myList => {
Lösung
Bitte versuchen Sie diese Lösung
Holen Sie sich alle verschachtelten untergeordneten Arrays und verwenden Sie die Arrays, um Daten anzuzeigen. Hier habe ich nur das erste Array verwendet. Sie können bei Bedarf alle Arrays iterieren und verwenden.
var atd, atr, temp;
let resultData = [];
//fetch('https://api.plos.org/search?q=title:DNA')
fetch('https://amp.gmail.dev/playground/public/ssr_amp_list')
.then((response) => response.json())
.then((data) => {
findChildArrays(data);
console.log(resultData)
if(resultData && resultData[0]) {
resultData[0].map(myList => {
var __keys = Object.keys(myList);
var __values = Object.values(myList);
$.each(__values, function(index,myList) {
atd = '<td>'+myList+'</td>'
atr += atd;
if((__keys.length) -1 == index){
temp+= '<tr>'+atr+'</tr>'
atr = '';
}
})
});
}
$('#data table').html(temp)
});
findChildArrays = function(data = {}) {
Object.keys(data).forEach(key => {
if(Array.isArray(data[key])) {
resultData.push(data[key])
}
else
findChildArrays(data[key] || [], )
});
return resultData;
};
Beantwortet von – Nitha
Antwort geprüft von – Cary Denson (FixError Admin)