[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:

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
Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

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:
Geben Sie hier die Bildbeschreibung ein

Eine weitere JSON-Datei : https://api.plos.org/search?q=title:DNA
Geben Sie hier die Bildbeschreibung ein

Für die obige JSON-Datei muss ich den Code wie folgt ändern:

data.site.docs.map(myList => {

Geben Sie hier die Bildbeschreibung ein

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)

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like