[FIXED] :: jQuery :: JSON Ersten Schlüssel finden und dynamisch ersetzen

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:

• https://amp.gmail.dev/playground/public/ssr_amp_list
• https://api.plos.org/search?q=title:DNA

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

Beispieldaten von obiger URL

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) 
})

Ausgabe:

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.

http://jsfiddle.net/r0uocnzv/

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)