Grabbing Daten von JSON mit JavaScript

Question

Ok, so habe ich eine json Ausgabe, die wie folgt aussieht:

{"Result" : [ 
       { 
       "Id" : "5214", 
       "ParentReasonId" : "0", 
       "Description" : "Billing & Payment", 
       "SysName" : "Billing & Payment", 
       "SysCategory" : "Billing & Payment", 
       "ClientId" : "924", 
       "DispositionCount" : "6", 
       "IsActive" : true, 
       "ChildReasonCount" : "8", 
       "Attributes" : [], 
       "SortOrder" : "0", 
       "CreatedBy" : null 
       } 
      ] 
} 

Und ich möchte die Daten-ID und Beschreibung davon ziehen.

jQuery("#chained_child").cascade("#chained", { 
    ajax: { url: 'Customhandler.ashx?List=MyList' }, 
     template: commonTemplate, 
     match: commonMatch 
    }); 

function commonTemplate(item) { 
    return "<option Value='" + item.Result.Id + "'>" 
      + item.Result.Description + "</option>"; 
}; 

Aber für das Leben von mir, ich kann sie nicht den Wert Ich suche zurückzukehren. Ich weiß, das ist etwas Noobish, aber ich stoße gegen eine Wand. Kann jemand helfen?

Answer 1

Wenn Sie Ihre JSON-Zeichenfolge untersuchen, ist Ihr Result-Objekt tatsächlich ein Array der Größe 1, das ein Objekt und nicht nur ein Objekt enthält. Sie sollten die zusätzlichen Klammern entfernen oder auf Ihre Variable verweisen mit:

item.Result[0].Id 

Um Ihre Variable referenzieren item.Result.Id verwenden zu können, muss die folgende JSON-String:

{ 
    "Result" : 
    { 
     "Id" : "5214", 
     "ParentReasonId" : "0", 
     "Description" : "Billing & Payment", 
     "SysName" : "Billing & Payment", 
     "SysCategory" : "Billing & Payment", 
     "ClientId" : "924", 
     "DispositionCount" : "6", 
     "IsActive" : true, 
     "ChildReasonCount" : "8", 
     "Attributes" : [], 
     "SortOrder" : "0", 
     "CreatedBy" : null 
    } 
} 

Answer 2

Eine Sache, die mich ungemein geholfen hat mit JSON funkyness hat Haltepunkte in Firebug gesetzt, die Sie Schritt durch das resultierende Objekt durchlaufen und seine Struktur anzeigen können.

Answer 3

Sie vielleicht einen Blick auf dieses JSON-Tutorial von IBM nehmen wollen:

Mastering Ajax, Part 10: Using JSON for data transfer

Answer 4

item.Result [0] .ID arbeitet als Sebastian erwähnt - aber es funktioniert nur, wenn "item" eigentlich ist hat einen Wert zugewiesen. Meine Vermutung ist, dass es nicht ist.

In Ihrer CommonTemplate-Funktion versuchen Sie, console.log (Element) zu tun und zu sehen, was das Ergebnis ist.

Answer 5

Soweit ich es auf dem plugin page sehen, senden Sie das Argument für die Vorlage Rückruf ein Artikel aus der JSON-Antwort ist, die ein Array ist. Ihre JSON-Antwort ist ein Objekt. Ich schätze, Sie senden nicht die richtige JSON-Antwort. Aber nehmen Sie das mit einem Körnchen Salz, da ich dieses Plugin noch nie benutzt habe.

Wie auch immer, wenn ich mich nicht irre, bist du Antwort sein sollte:

[ 
    { 
     "Result" : 
     { 
      "Id" : "5214", 
      "ParentReasonId" : "0", 
      "Description" : "Billing & Payment", 
      "SysName" : "Billing & Payment", 
      "SysCategory" : "Billing & Payment", 
      "ClientId" : "924", 
      "DispositionCount" : "6", 
      "IsActive" : true, 
      "ChildReasonCount" : "8", 
      "Attributes" : [], 
      "SortOrder" : "0", 
      "CreatedBy" : null 
     } 
    } 
] 

Answer 6

Ionut G. Stan Antwort richtig ist. Ihre json-Ausgabe ist nicht das richtige Format für das Kaskaden-Plugin.

Wenn Sie Ihren JSON nicht ändern möchten, können Sie die Option dataFilter in den Einstellungen ajax verwenden, um die Daten zu erweitern.

Ich habe eine Arbeits Demo hier ein: http://jsbin.com/ebohe (editierbar über http://jsbin.com/ebohe/edit)

Hier ist der relevante javascript:

$(function(){ 
    $('#chained_child').cascade(
    '#chained', 
    { 
     ajax: { 
     url: 'Customhandler.ashx?List=MyList', 
     dataFilter: extractResult 
     }, 
     template: customTemplate, 
     match: customMatch 
    } 
); 

    function extractResult(data) { 
    return eval('(' + data + ')').Result; 
    } 

    function customTemplate(item) { 
    return $('<option />') 
     .val(item.Id) 
     .text(item.Description); 
    } 

    function customMatch(selectedValue) { 
    return this.ParentReasonId == selectedValue; 
    } 
});