Теперь у меня есть объект json, как мне сделать div с элементами - PullRequest
Новая
       13

Теперь у меня есть объект json, как мне сделать div с элементами

0 голосов
/ 11 сентября 2010

Я использую getJson, чтобы вывести некоторую информацию на страницу 

$('#request_song').autocomplete({
  serviceUrl: '<%= ajax_path("trackName") %>',
  minChars:1,
  width: 300,
  delimiter: /(,|;)\s*/,
  deferRequestBy: 0, //miliseconds
  params: { artists: 'Yes' },
onSelect: function(value, data){
    // alert('You selected: ' + value + ', ' + $('#request_artist').val()); 
        $.getJSON('/get_events', function(data) {
                    $(data).each(function(key, value) {
                        console.log(value);
                    });
                });

    },
});

У json будет название события, город и дата

Мне нужно получитьdiv, который находится на странице, имеет значения из json, такие как 

<div id="event_data">

//table info from json

Ответы [ 2 ]

1 голос
/ 13 сентября 2010

Полагаю, ваш ответ выглядит примерно так ... 

var data = [{
  "event": "Birthday"
  "name": "John Doe",
  "city": "Sunnyvale",
  "date": "04/07/1982"
},{
  ...
}]

Если вы используете $('<div />') или $('<div></div>') для создания новых элементов, jQuery будет использовать регулярное выражение перед созданием элемента, что по понятным причинам замедлит вас, если вы работаете с большими наборами данных.

Для использования производительности: 

var div = $(document.createElement('div'));

or keep it simple...

var div = document.createElement('div');

Для производительности используйте стандартный цикл, а не $ .each, и кешируйте длину: 

var container = $("#event_data");

for(var i = 0, k = data.length; i < k; i++){
  var event = $(document.createElement('div')),
      name = $(document.createElement('span')),
      city = $(document.createElement('span')),
      date = $(document.createElement('span'));

  // add id to event wrapper, if undefined generate random ID to avoid conflicts
  event.attr('id', 'event_'+data[i].event || Math.floor(Math.random()*100));

  // add each item, if undefined then insert empty text
  name.text(data[i].name || "").appendTo(event);
  city.text(data[i].city || "").appendTo(event);
  date.text(data[i].date || "").appendTo(event);

  // append & appendTo do exactly the same thing, markup preference
  container.append(event);
}

Если вы используете text (), значение будет обрабатываться как только это, только текст, и не будет выполняться . Если вы используете html () , у вас будут проблемы с XSS .

Надеюсь, это поможет и то, что вы ищете.

1 голос
/ 11 сентября 2010

Поместите разметку в аргумент в $(), чтобы создать из нее элемент. Используйте значения в поиске {} для установки атрибутов и текстового содержимого (в jQuery 1.4). например. что-то вроде: 

$('#event_data').append(
    $('<div class="event"/>', {id: 'event_'+key}).append(
        $('<span class="event-name"/>', {text: value.name})
        $('<span class="event-city"/>', {text: value.city})
        $('<span class="event-date"/>', {text: value.date})
    )
);

Не пытайтесь собрать его вместе ($('<span>'+value.name+'</span>')), иначе у вас возникнут проблемы с кодировкой HTML и, возможно, дыры в безопасности межсайтовых сценариев.

...