Ajax: verschachtelte Variablen aus json Linie ziehen

Question

Ich möchte bestimmte Werte aus einer json Linie (cownumber, Gewicht, Größe) wie folgt

Die JSON schaut ziehen, wenn aus der URL zugegriffen Postman mit

{ 
    "data": { 
    "attributes": { 
     "cownumber": "1234", 
     "weight": 300, 
     "height": 25 
    }, 
    "type": "master_animal" 
    }, 
    "links": { 
    "self": "/master_animal/1234" 
    } 
} 

ich eine Funktion verwenden, um die cownumber aus der URL

function getQueryVariable(variable) 
{ 
     var query = window.location.search.substring(1); 
     var vars = query.split("&"); 
     for (var i=0;i<vars.length;i++) { 
       var pair = vars[i].split("="); 
       if(pair[0] == variable){return pair[1];} 
     } 
     return(false); 
} 
</script> 

Dann mit dem cownumber zu extrahieren, mag ich die json Linie von einer anderen URL ziehen

<script type = "text/javascript"> 
    $(document).ready(function(){ 
    $('#load').click(function(){ 
     var cownumber = getQueryVariable("cownumber") 
     $.ajax({ 
       url: '/api/master_animal/'+cownumber, 
       data: {}, 
       type: 'GET', 
       datatype : 'json', 
       success: function(data) { 
        var height = $(data['height']); 
        var weight = $(data['weight']); 

        $('#cownumber').val(cownumber); 
        $('#height').val(height); 
        $('#weight').val(weight); 
        console.log(data); 
       }, 
       error: function(error) { 
        alert(JSON.stringify(error)); 
       } 
      }); 

     }); 
    }); 
</script> 

Auf meiner Website möchte ich die Nummer, das Gewicht und die Höhe anzeigen. Aber alles, was es anzeigt, ist die Cownumber (weil es diese Variable aus der Funktion getQueryVariable gezogen hat). Für Größe und Gewicht zeigt es „[Objekt object]“

Picture of website side

Ich bin nicht sicher, ob das, was ist die beste Methode, um die erforderlichen Variablen aus der json Linie zu ziehen. Ich bin nicht einmal ganz davon überzeugt, dass die Funktion tatsächlich die JSON-Daten bekommt.

Answer 1

Zuerst greifen Sie auf Ihre Daten falsch zu. Nur weil Ihre Variable data heißt, bedeutet das nicht, dass Ihr Zugriff auf die Daten bereits auf der data-Eigenschaft liegt. Das bedeutet, dass Sie auf die Daten wie folgt zugreifen müssen:

var height = data.data.attributes.height; 

Auch müssen Sie Ihre Werte nicht in jQuery umbrechen. Einfach den Wert bekommen und es verwenden,

var height = data.data.attributes.height; 
$('#height').val(height); 

Answer 2

Haben Sie das versucht?

 

    
    $(document).ready(function(){ 
    $('#load').click(function(){ 
     let cownumber = getQueryVariable("cownumber") 
     $.ajax({ 
       url: '/api/master_animal/'+cownumber, 
       type: 'GET', 
       dataType : 'json', 
       success: function(response) { 
        data = response['data']['attributes']; 
        let height = $(data['height']); 
        let weight = $(data['weight']); 

        $('#cownumber').val(cownumber); 
        $('#height').val(height); 
        $('#weight').val(weight); 
        console.log(data); 
       }, 
       error: function(error) { 
        alert(JSON.stringify(error)); 
       } 
      }); 

     }); 
    }); 
    

Answer 3

Die height und weight Eigenschaften werden weiter in Ihrer Antwort-Objekt verschachtelt, innerhalb des attributes:

success: function(response) { 
    var height = response.data.attributes.height; 
    var weight = response.data.attributes.weight; 

    $('#cownumber').val(cownumber); 
    $('#height').val(height); 
    $('#weight').val(weight); 
}, 

Answer 4

verwenden utils Funktion einen beliebigen Wert aus einer verschachtelten zu extrahieren Objekt.

getValueAtPath(obj, path, def){ 

    if(!obj) return def; 

    path = path.split('.'); 
    let i, len; 
    len = path.length; 

    for(i = 0; i < len; i++){ 
     if(!obj || typeof obj !== 'object') return def; 
     obj = obj[path[i]]; 
    } 

    if (obj === undefined) return def; 

    return obj; 
} 

In Ihrem Fall zu bekommen cownumber, weight, height, würden Sie einfach tun

let cowNumber = getValueatPath(jsonData, 'data.attributs.cownumber', defualtvalue) 

let height = getValueatPath(jsonData, 'data.attributs.height', defualtvalue) 

let weight = getValueatPath(jsonData, 'data.attributs.weight', defualtvalue) 

hoffe, das hilft;