Enlazar objeto JSON al elemento HTML

Question

Quiero vincular un objeto JSON a un elemento HTML.

p. Ej.

que tienen una "persona" objeto con el "nombre" atributos "Apellido"

<div class="person-list"> 
    <div class="person-list-item"> 
    <div>John</div> ---> bind it to person.firstName 
    <div>Smith</div> ---> bind it to person.lastName 
    </div> 
</div> 

lo tanto, si un valor de los elementos HTML se cambia, entonces será también la persona objeto se actualiza.

¿Esto es posible de alguna manera?

que utilizo:

• jQuery
• ASP.NET MVC 3

Answer 1

Si va a hacer esto mucho en su aplicación, puede traer una biblioteca como la excelente Knockout.js que usa MVVM para hacer enlaces como usted describe.

su margen de beneficio sería algo como esto:

<div data-bind="text: firstName"></div> 
<div data-bind="text: lastName"></div> 

Y en su código JavaScript:

function MyViewModel() { 
    this.firstName = "John"; 
    this.lastName = "Smith"; 
} 

ko.applyBindings(new MyViewModel()); 

También puede utilizar un conjunto de datos si hay muchas personas "" Pruebe este tutorial si desea aprender cómo hacerlo: Working with Lists and Collections.

Otros enlaces de interés:

• Introduction tutorial
• Excellent demo video (about 30 minutes)

Answer 2

recomiendo echar un vistazo a Knockout. Configurar el enlace de datos como lo que está buscando es muy sencillo.

Answer 3

Puede analizar el JSON para convertirlo en un objeto de JavaScript:

var data = $.parseJSON(json_string); 
// or without jQuery: 
var data = JSON.parse(json_string); 

Si he entendido tu questi en correctamente, debe tener JSON que se parecen a esto:

[ 
    { 
     "firstName": "John", 
     "lastName": "Smith" 
    }, 
    { 
     "firstName": "Another", 
     "lastName": "Person" 
    } // etc 
] 

lo que sólo puede recorrer el pueblo de esta manera:

$(document).ready(function() { 
    var str = '[{"firstName":"John","lastName":"Smith"},{"firstName":"Another","lastName": "Person"}]', 
     data = $.parseJSON(str); 
    $.each(data, function() { 
     var html = '<div class="person-list-item"><div>' + this.firstName + '</div><div>' + this.lastName + '</div></div>'; 
     $('#person-list').append(html); 
    }); 
});​ 

violín: http://jsfiddle.net/RgdhX/2/

Answer 4

Usted puede utilizar una de las Libereries MVC/MVVM tales como Backbone.js o Knockoutjs.

Answer 5

En primer lugar, añadir id atributos de su margen de beneficio (se puede hacer esto con el DOM, pero para la mayor claridad en aras id s son probablemente el más adecuado para este ejemplo):

<div class="person-list-item"> 
    <div id="firstname">John</div> 
    <div id="lastname">Smith</div> 
</div> 

uso de un controlador de eventos de jQuery para actualizar el campos cada vez que se modificaron (esto es una solución ineficiente, pero hace el trabajo hecho- se preocupe acerca de la optimización una vez que tenga algo funcional):

// declare your object 
function person(firstn, lastn) { 
    this.firstname = firstn; 
    this.lastname = lastn; 
} 

var myGuy = new person("John", "Smith"); 

$(document).ready(function() { 
    $("#firstname").change(function() { 
     myGuy.firstname = $("#firstname").val(); 
    }); 

    $("#lastname").change(function() { 
     myGuy.lastname = $("#lastname").val(); 
    }); 

    // etc... 
}); 

Ahora cada vez que se actualizan los campos de su objeto será también.