Итерация через Json - JavaScript, Ajax

maomam · 03.11.2012, 12:42

Всем привет.
Сижу вод над такой задачей. Есть объект Джейсон. При нажатии на кнопку скрипт должен его обработать и выдать таблицу с тремя колонками данных. То есть таблица генерируется тоже в скрипте.
Не могу понять где я сделала ошибку. В скобках и методах bind запуталась :-( Что вообще этот бинд именно делает??

Код:

 
<!DOCTYPE html>
<html>
  <head> 
   <title> JSON  </title>
    <script type="text/javascript" src="JQuery.js">  </script>
</head>
   <body>
 <h1>Die Aktienkurse von heute </h1>

<input type="button" value = "Anzeigen" onclick="anzeigen()"> 
<script type="text/javascript">

  var JSONObject = {
        "list" : {
          "meta" : {
            "type" : "resource-list",
            "start" : 0,
            "count" : 163
            },
            "resources" : [
            {
              "resource" : {
                "classname" : "Quote",
                "fields" : {
                  "name" : "USD/KRW",
                  "price" : "1111.300049",
                  "symbol" : "KRW=X",
                  "ts" : "1350021593",
                  "type" : "currency",
                  "utctime" : "2012-10-12T05:59:53+0000",
                  "volume" : "663253708"
                }
              }
            },
            {
              "resource" : {
                "classname" : "Quote",
                "fields" : {
                  "name" : "SILVER 1 OZ 999 NY",
                  "price" : "0.029372",
                  "symbol" : "XAG=X",
                  "ts" : "1349991010",
                  "type" : "currency",
                  "utctime" : "2012-10-11T21:30:10+0000",
                  "volume" : "663253708"
                }
              }
            }]
        }
    };
  
  function anzeigen(){
  var list = JSONObject.resources;
  var table = new Element('table', {'width':'100%'}); 
   list.each(function(resource) {
      var tr = new Element('tr');
      $each(resource, function(value, key) {
      new Element('td', { 'text': list.name }).inject(tr);
      new Element('td', { 'text': list.price }).inject(tr);
      new Element('td', { 'text': list.symbol }).inject(tr);
      new Element('td', { 'text': list.type }).inject(tr);
      
      tr.inject(table);
  }.bind(this));
  table.inject($(this.options.container));
}.bind(this));
  

	</script>
 </body>

MyLastHit · 04.11.2012, 15:26

С jQuery так плотно не работаю, но в Underscore .bind(this) - биндит контекст this к каллбеку. Здесь видимо тоже самое. Очень много непонятных мест в коде.

Код:

var list = JSONObject.resources;

Структура JSON: list>resources>resource*2
Т.е.

Код:

var list = JSONObject.list.resources;

И это у вас не Коллекция по моделям в Backbone. Просто так нельзя использовать метод .each().

Код:

$.each(list, function(res){})

А такой синтаксис вижу впервые:

Код:

new Element

Сначала нужно создать конструктор-функцию Element самому. Но зачем если у вас jQuery, в котором есть прекрасный метод .after()?
А это что?

Код:

$each(resource, function(value, key){})

А это?

Код:

table.inject($(this.options.container));

В общем такое ощущение, что это кентаврик.
Ваша задача решается намного проще... Оптимизируйте сами.

Код:

function anzeigen() {
  var resources = JSONObject.list.resources;
  $('input[type=button]').after('<table border="1" id="price"></table>');
  $('#price').append('<tr><th>name</th><th>price</th><th>symbol</th><th>type</th></tr>')
  $.each(resources, function (index, res) {
    var curField = res.resource.fields;
    $('#price').append('<tr><td>' + curField.name + '</td><td>' + curField.price + '</td><td>' + curField.symbol + '</td><td>' + curField.type + '</td></tr>')
  });
}

maomam · 05.11.2012, 00:36

Спасибо Вам огромное! Работает на ура!!

Я только начинаю узучить Джейквири. многи функции непонятные еще. Но в вашем коде все сразу понятно.
Спасибо огромное.

MyLastHit · 05.11.2012, 01:46

Если только начинаешь учить, то делай сразу все правильно. Не нужно таких извращений. Нужно отделять логику приложения, от его представления. В идеале в JS не должно быть в таком виде html-разметки.
Что плохо в том коде, что я написал и почему я хочу, чтобы вы его оптимизировали:
1) Большое количество html-разметки внутри JS-кода.
2) Работа с DOM происходит в цикле. Чем меньше раз обратились к DOM, тем лучше и тем быстрее ваше приложение будет работать.

А по поводу jQuery скажу - вам не понадобится его глубокое знание.
1) Нужно понимать, что все методы jQuery доступны только по отношению к объектам jQuery. Т.е. Если это работа с разметкой, то нужно оборачивать в $() html-представления, а если работа с объектом(JSON и тд), то доступ по $.method()
2) Из методов для работы с html-разметкой понадобится только .before(), .after(), .append(), .prepend(), .html()
3) Для хождения по DOMу .find(), .parent(), .next() и .prev()
4) Для свестелок и перделок .css(), .animate(), .fadeIn(), .fadeOut(), .hide(), .show()
Все остальное не нужно. В Underscore.js есть много всяких видов циклов и прочих сладостей. Я уже и забыл когда в последний раз пытался что-то сам реализовать. В Underscore есть всё что нужно.
В Backbone.js есть все для написания многофункционального, легко поддерживаемого сайта.
А jQuery+Underscore+Backbone = гремучая смесь.

04.11.2012, 15:26	#2
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	С jQuery так плотно не работаю, но в Underscore .bind(this) - биндит контекст this к каллбеку. Здесь видимо тоже самое. Очень много непонятных мест в коде. Код: `var list = JSONObject.resources;` Структура JSON: list>resources>resource2 Т.е. Код: `var list = JSONObject.list.resources;` И это у вас не Коллекция по моделям в Backbone. Просто так нельзя использовать метод .each(). Код: `$.each(list, function(res){})` А такой синтаксис вижу впервые: Код: `new Element` Сначала нужно создать конструктор-функцию Element самому. Но зачем если у вас jQuery, в котором есть прекрасный метод .after()? А это что? Код: `$each(resource, function(value, key){})` А это? Код: `table.inject($(this.options.container));` В общем такое ощущение, что это кентаврик. Ваша задача решается намного проще... Оптимизируйте сами. Код: `function anzeigen() { var resources = JSONObject.list.resources; $('input[type=button]').after('<table border="1" id="price"></table>'); $('#price').append('<tr><th>name</th><th>price</th><th>symbol</th><th>type</th></tr>') $.each(resources, function (index, res) { var curField = res.resource.fields; $('#price').append('<tr><td>' + curField.name + '</td><td>' + curField.price + '</td><td>' + curField.symbol + '</td><td>' + curField.type + '</td></tr>') }); }` Ненавижу быть как все, но люблю, чтобы все были как я. Последний раз редактировалось MyLastHit; 04.11.2012 в 15:49.*

05.11.2012, 01:46	#4
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Если только начинаешь учить, то делай сразу все правильно. Не нужно таких извращений. Нужно отделять логику приложения, от его представления. В идеале в JS не должно быть в таком виде html-разметки. Что плохо в том коде, что я написал и почему я хочу, чтобы вы его оптимизировали: 1) Большое количество html-разметки внутри JS-кода. 2) Работа с DOM происходит в цикле. Чем меньше раз обратились к DOM, тем лучше и тем быстрее ваше приложение будет работать. А по поводу jQuery скажу - вам не понадобится его глубокое знание. 1) Нужно понимать, что все методы jQuery доступны только по отношению к объектам jQuery. Т.е. Если это работа с разметкой, то нужно оборачивать в $() html-представления, а если работа с объектом(JSON и тд), то доступ по $.method() 2) Из методов для работы с html-разметкой понадобится только .before(), .after(), .append(), .prepend(), .html() 3) Для хождения по DOMу .find(), .parent(), .next() и .prev() 4) Для свестелок и перделок .css(), .animate(), .fadeIn(), .fadeOut(), .hide(), .show() Все остальное не нужно. В Underscore.js есть много всяких видов циклов и прочих сладостей. Я уже и забыл когда в последний раз пытался что-то сам реализовать. В Underscore есть всё что нужно. В Backbone.js есть все для написания многофункционального, легко поддерживаемого сайта. А jQuery+Underscore+Backbone = гремучая смесь. Ненавижу быть как все, но люблю, чтобы все были как я. Последний раз редактировалось MyLastHit; 05.11.2012 в 01:56.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Итерация через объект JSON в Javascript	maomam	Помощь студентам	0	03.11.2012 00:51
итерация	hartman	Помощь студентам	0	30.03.2012 20:08
итерация	маГГ85	JavaScript, Ajax	2	26.12.2011 12:00
Передача HTML через JSON	nec117	JavaScript, Ajax	3	08.08.2011 14:06

05.11.2012, 00:36	#3
maomam Регистрация: 03.11.2012 Сообщений: 8	Спасибо Вам огромное! Работает на ура!! Я только начинаю узучить Джейквири. многи функции непонятные еще. Но в вашем коде все сразу понятно. Спасибо огромное.