Блог

Мне нужна помощь в понимании наилучшего способа управления структурой данных JavaScript (если вы это так называете?). Я работаю на Perl и пытаюсь выполнить итерацию по структуре данных JavaScript, чтобы обновить div (или таблицу) на лету. В настоящее время я просто превращаю данные в переменную (data), чтобы начать работу. как только я это отсортирую, я буду использовать методы ajax jquery, чтобы получить данные в виде объекта json «на лету». Насколько я понимаю, структура данных, которую я сейчас генерирую, — это то же самое, что я получил бы, если бы это был json?? если нет, то, я думаю, это другой вопрос..

Я много раз искал такое руководство, но все они близки, но не нашел того, что соответствует моим потребностям…

Я хотел бы в будущем иметь возможность изменять порядок массива и повторно заполнять #data_table div, поэтому часть моего вопроса такова: это вообще лучший способ представления данных? Затем я хочу обновить только одну часть массива, например, номер телефона компании или добавить человека, а затем перерисовать div из этого обновленного массива…

Конечный результат для пользователя может выглядеть следующим образом:

Компания: 99 Beans, Окленд, тел.: 360499 Люди: Мэтт, 6471 Кристиан, 6472 Мишель, 6473 Джуди, 6474

Компания: …. * Следующая компания и так далее..

Мой код пока выглядит следующим образом (за исключением того, что у меня более 500 записей в массиве данных и только 2 здесь):

Я взял часть этого кода из другого вопроса, который я нашел здесь, и попытался заставить его работать для моего типа структуры..

 <script>
$(document).ready(function() {

var r = new Array();

var data= [
{
  "id":"6477",
  "c":"99 Beans",
  "ci":"Auckland",
  "p":"09 360499",
  "co":[
        {"id":"6471","c":" NZ", "n":"Matt" },
        {"id":"6472","c":" NZ", "n":"Chrstiaan" },
        {"id":"6473","c":" NZ", "n":"Michelle" },
        {"id":"6474","c":" NZ", "n":"Judy " },
        {"id":"6475","c":" NZ", "n":"Kate  " },
        {"id":"6476","c":" NZ", "n":"Unknown Person" }
       ]
},
{"id":"7145", "c":"A1 Ltd", "ci":"Te Puke ","p":"06 870090",
  "co":[{"id":"7145","c":" NZ", "n":"Alan" }
   ]
   },
];

// this alert used to work, when I had the data as an array of arrays so there must be a problem with how I'm referencing it or my data structure is wrong??
alert (data.length   " companies" );//  data[455].co[0].n);

  var j = -1;
    for (var key=0, size=data.length; key<size; key  ) {
     // first div 
      r[  j] ='<div>';
      r[  j] = data[key].id;
      r[  j] = ' - ';
      r[  j] = data[key].c;
      r[  j] = ' - ';
      r[  j] = data[key].p;
      r[  j] = '<br />';
     //inner div 

   var k = -1 ;
    for (var key1=0, size1=data[key].d.length; key1<size1; key1  ) {
      r[  j] ='<div>';
      r[  j] = data[key].d.[key1].n   ' - '   data[key].d.[key1].c   ' - ';
      r[  j] = '</div>';
   }  

      r[  j] = '</div>';
    } 

  $('#data_table').html(r.join('')); 

});

</script>

<div id="data_table"></div>
  

Представление JSON в Javascript является объектом javascript.

 var json = {
  my_property: 2,
  another_property: 'string!'
}
  

Затем вы можете извлекать свойства с помощью json.my_property или json['my_property'] (что хорошо, если вы не знаете, что именно вы извлекаете, вы можете сделать var something = 'something-the-user-selected'; json[something] ).

Итак, с jQuery вы бы сделали что-то вроде этого:

 var json = {}; // get this from the server using $.AJAX() or $.getJSON()
$("#my_table").append("<tr><td>"   json.my_property   "</tr></td");
  

Или, если у вас есть массив, скажем, твитов, вы должны выполнить итерацию по ним, возможно, с подчеркиванием каждого, каждым из jQuery или простым старым for (var i = 0; i < json.tweets.length; i ) .

Структура данных, на которую вы ссылаетесь, — это JSON.

С помощью jQuery вы можете легко повторять свою структуру данных с помощью .each() и обрабатывать возвращаемое значение как объект с определенными атрибутами.

Вот пример выполнения вызова Ajax, который создаст ваш объект JSON и повторит:

 $.ajax({
            type: "POST",
            url: "MySite/MyResource",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if(data.d.length > 0){
                    $(data.d).each(function(){$('#mytable').append("<tr><td>Company: "   this.c   "</td></tr>");});
                }

            },
            error: function (xhr, status, error) {
                // do something appropriate
            }
        });
  

Если вы хотите продолжить итерацию, вы можете продолжить вызывать .each()

Если данные являются вашим значением JSON, это отформатирует указанную вами строку. (Вам нужно будет JSONify вашу строку, чтобы создать ее как фактический объект JSON)

 data.each(function(){ 
  $('#mydiv').append('Company: '   this.c   ', '   this.ci   ', Ph: '   this.p   ' People: ');
  this.co.each(function(){$('#mydiv').append(this.n   ', '   this.id);});
});
  

Что касается «рендеринга объекта JSON в HTML», вы можете захотеть взглянуть на jQuery.template() , который позволяет отображать фрагменты HTML с синтаксисом шаблона. Я никогда не использовал его, поэтому не знаю, насколько хорошо он может работать с очень большими списками… (также обратите внимание, что это все еще в бета-версии)

Обновить

Вот рабочий пример (возможно, он не является оптимальным или что-то еще), но вы должны увидеть общую идею 😉http://jsfiddle.net/tsimbalar/A9uYP

ОБНОВЛЕНИЕ 2 для полноты и отслеживаемости

В исходном коде была синтаксическая ошибка, которая не позволила alert() выполнить (и весь последующий код). Смотрите комментарий :

Ваш код не работает из-за синтаксической ошибки в data[key].d.[key1].n. , которая является недопустимым синтаксисом. (я полагаю, так и должно быть data[key].d[key1].n . Используйте расширение Firebug в Firefox для обнаружения такого рода проблем, которые в противном случае остались бы незамеченными.

После исправления этой опечатки легко выполнить итерацию по содержимому объекта, используя jQuery.each() как упомянуто катальпой в другом ответе. Затем вы можете создавать HTML-элементы (т.Е. $("<div/>") ) и добавлять их к существующим элементам страницы с помощью append() . (см. Скрипку об этой части)

js-шаблоны handlebars намного лучше, чем шаблон jquery, и могут использоваться для рендеринга сложных объектов json в html