jQuery. Jede Methode gibt den letzten Wert zurück

Question

Ich fühle mich wie die .each() Methode funktioniert nicht wirklich. Hier ist mein Code:

function makeHTML(data) { 
console.info(data.categories); 

$(data).each(function() { 
    let createButton = ` 
       <div class="col-md-6"> 
        <button type="button" class="btn btn-default"> 
         <a href="${data.categories.category.id}" 
         target="_blank">${data.categories.category.title}</a> 
        </button> 
       </div> 
       `; 
    document.getElementById('table').innerHTML = createButton; 
}); 
} 

$(document).ready(function() { 
$.ajax({ 
    type: 'GET', 
    contentType: "application/json; charset=utf-8", 
    url: "json/data.json", 
    dataType: "json", 
    success: makeHTML, 
    error: function (result) { 
     console.error(result); 
    } 
}); 
}); 

Es ist nur der letzte Satz in der json Rückkehr, die wie folgt aussieht:

{ 
    "categories": { 
    "category": { 
     "title": "Something", 
     "id": 1 
    }, 
    "category": { 
     "title": "Something Else", 
     "id": 2 
    } 
    } 
} 

Ich habe versucht, das Hinzufügen Debugger; unmittelbar nach dem innerHTML = createButton; um die Schleife zu beobachten, aber es geht nur einmal in jQuery. Es ist komisch. Ich weiß nicht, was ich falsch mache.

Answer 1

Wenn Sie es ändern:

{ 
    "categories": { 
    "category1": { 
     "title": "Something", 
     "id": 1 
    }, 
    "category2": { 
     "title": "Something Else", 
     "id": 2 
    } 
    } 
} 

Ihr Code beide Objekte erkennen, so dass man sie nicht so stapeln. JSON überschreibt seine Attribute und sieht nur eine Version. Sie müssen es in ein Array ändern.

Log von Firebug:

Objekt {category1 = {...}, category2 = {...}}

Sie Funktion ändern sollte:

function makeHTML(data) { 
console.info(data.categories); 

$(data.categories).each(function (index, data2) { 
    var createButton = ` 
       <div class="col-md-6"> 
        <button type="button" class="btn btn-default"> 
         <a href="${data2.id}" 
         target="_blank">${data2.title}</a> 
        </button> 
       </div> 
       `; 
    document.getElementById('table').innerHTML += createButton;//add not set 
}); 
} 

$(document).ready(function() { 
$.ajax({ 
    type: 'GET', 
    contentType: "application/json; charset=utf-8", 
    url: "json/data.json", 
    dataType: "json", 
    success: makeHTML, 
    error: function (result) { 
     console.error(result); 
    } 
}); 
}); 

Und Daten zu

{ 
    "categories": [ 
    { 
     "title": "Something", 
     "id": 1 
    }, 
    { 
     "title": "Something Else", 
     "id": 2 
    } 
    ] 
} 

Answer 2

Ich denke, man sollte die Zeile so etwas wie dies ändern.

$(data.categories).each(function (key, value) { 
    console.log("title", value.title); 
}); 

Answer 3

Sie die document.getElementById setzen (‚table‘) innerHTML- = Create; In jeder Schleife schreiben Sie auf diese Weise n mal in die Tabelle und jedes Mal, wenn Sie nur den letzten "createButton" setzen, empfehle ich Ihnen, Ihre Variable vor jeder ihrer() -Schleifen zu initialisieren, dann jede Antwort von jeder Iteration und nur Am Ende schieben Sie Ihre Daten in das innereHTML.

Answer 4

Das Problem besteht darin, dass Sie ein falsches JSON-Format verwenden. Duplizierst die Schlüssel und die Namen sollten eindeutig sein. Dies sollte

{ 
     "categories":[ 
      { 
      "title":"Something", 
      "id":1 
      }, 
      { 
      "title":"Something Else", 
      "id":2 
      } 
     ] 
    } 

andere Sache ist, dass Sie arbeiten div-Elemente auf einem Tisch anzuhängen versuchen, enthält die Tabelle muss Zeilen und Spalten. Also, wenn ich Ihre Frage verstehen dies ist die Art und Weise Ihr, wie Ihr JSON-Elemente an die Tabelle anzufügen: HTML:

<table id='table'> 

</table> 

Skriptvariablen:

var categoriesJson = [ 
      { 
      "title":"Something", 
      "id":0 
      }, 
      { 
      "title":"Something Else", 
      "id":1 
      } 
     ] 
var result = ''; 

Skriptcode:

$(document).ready(function(){ 

      $.each(categoriesJson, function (i, item) { 
        result += "<tr><td><button id='"+item.id+"'>" + item.title + "</button></tr></td>" 

       $('#table').append(result); 
      }); 


     });