Home/ Questions/Q 3500068
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T12:41:19+00:00

The Good: We send a JSON array of nested objects using JQuery and .ajax().

  • 0

The Good:

We send a JSON array of nested objects using JQuery and .ajax(). We use JQuery and Microsoft templates to render the content. It sends 100 objects in 400 ms. This is so much faster than our equivalent server rendering of 50 products in 10 seconds.

The Difficulty:

We need to bind a JavaScript object array to the DOM html elements it represents, i.e., changes to the html input will reflect back to the JavaScript object. Our difficulty is that our objects are nested, and only contain selected options:

Product[].Department[].deptid;
// We only store the departments for which this product participates

We tried Microsoft data linking using JQuery, which requires both object properties and html elements to exist in order to bind them together. That doesn’t do well for the above situation. We could do this:

Product[].Department[].Dept.id;
Product[].Department[].Dept.name;
Product[].Department[].Dept.selected;  // true if selected, false if not
// This requires all possible options in all needed products.  Yuck

Are there any examples out there on how best to handle binding a JavaScript nested object array to the HTML elements they represent?

We don’t submit form elements back to the server. Instead we collect them in to a JSON array and send that back to the server. It works extremely fast, but assembly is tedious.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s hard to know exactly what you’re having trouble with from your description, but it seems like there are two things that might help:

    1) You can store data on a dom element using jQuery’s data() method http://api.jquery.com/data/

    2) You can get the value of a form element using the change() event and the val() method. (You can also find those in the API docs.)

    But it seems like you could be running into something more basic, like the question of how to know which Javascript object goes with with form element. Is that the case?

    • 0