在jQuery UI对话框中将数据从JSON获取到TextBoxes

I will try to explain my situation here as much as possible. Since it's a work related issue I don't have much code to show.

I am working with a jQuery dialog. Scenario is, I got a list of some names per say & there's a bootstrap dropdown in front of each name. To be more specific, I am trying to make a edit window, by which user can edit the record . The names are coming from a JSON fetched from PHP based backend.

We all know that we can easily get data & manipulate it using $.get right? In the same block, I wrote the code for jQuery UI Dialog like this,

//document.ready block
$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
 $("#btn-edit").on('click', function(){
    $( "#dialog" ).dialog({
      open: function(){

         $('#some_textbox').val(data.name); //textbox is in the dialog
      }
    });
 });
});

<div id="dialog" title="Basic dialog">
 <p>This is the default dialog which is useful for displaying information. The dialog  window can be moved, resized and closed with the 'x' icon.</p>
</div>

The issue was that the textbox's value was not getting set to data.name whereas I could perfectly console.log(data); in that block. I was able to set some random string like this too, $('#some_textbox').val("some random string");.

Why?

So my mentor aka supervisor told me that, it has to do something with bindings. Is it true? How could I possibly solve this?

The problem is that you are getting a string back that is possibly valid json, but which is not parsed yet. You could parse the result, but easier would be to change $.get:

$.getJSON( "ajax/test.html", function( data ) {

This is an example of a JSON file: (producten.json)

[
{"model":"SAMSUNG", "price":"1000", "omschrijving":"Dit is een groot teveetje", "scherm":"1000", "label":"A++", "wifi":"Ja, ingebouwd"},
{"model":"SONY", "price":"2000", "omschrijving":"Dit is een nog groter teveetje", "scherm":"2000", "label":"A+", "wifi":"Ja, met dongle (optie)"}
]

This is how you fetch stuff from it and input it in html:

$(document).ready(function() {
// get JSON data from producten.json
console.log("Jquery triggered");
$.getJSON('producten.json', function(data) {
    console.log("getJSON triggered");
    var i = 0;
    var bool = true;
    while(bool) {
        console.log(data[i].model);
    var model = data[i].model;
    var price = data[i].price;
    var omschrijving = data[i].omschrijving;
    var scherm = data[i].scherm;
    var label = data[i].label;
    var wifi = data[i].wifi;
    i++;
            //add artikel by JSON
        var artikel = "<article><h3>" + model + "</h3><ul><li><img alt='" + model + "' src='images/tv-icon.png'><span>" + price + " EUR</span></li><li>" + omschrijving + "</li><li><ul class='product-details'><li class='diagonal'>Scherm diagonaal: <span>" + scherm + " cm</span></li><li class='energy-label'>Energie label: <span>" + label + "</span></li><li class='wi-fi'>Wi-Fi <span>" + wifi + "</span></li></ul></li></ul></article>";
        $("section:eq(1)").append(artikel);
        console.log("Article added to page by JSON");
    }
    console.log("data JSON obtained");
});

Sorry for the crappy while loop, it's almost bed time hehe ^^