Как получить информацию из объекта JSON с помощью jquery - PullRequest
Новая
       5

Как получить информацию из объекта JSON с помощью jquery

0 голосов
/ 12 декабря 2011

Мои объекты Json находятся внутри внешнего файла с именем abc.json в моем файле js, который я называю.У меня есть html-разметка, подобная этой 

<li class="" data-flight-name="kingfisher" data-flight-id="E6-184"></li>
<li class="" data-flight-name="indigo" data-flight-id="E6-185"></li>

Мое требование - когда бы я ни нажимал на эту LI, передавайте эти data-flight-name и data-flight-id при получении информации через JSON, но при получении яНе удается получить правильные данные.

Структура моего файла Json 

{
  "flightInfo" :{
    "indigo": [
          {"E-184" : {"flightName": "Indigo", "duration": "1h:0m", "baseFare": 1753, "travelTime": "11:13 - 12:13"}},
          {"E-185" : {"flightName": "Indigo", "duration": "1h:0m", "baseFare": 1753, "travelTime": "11:13 - 12:13"}},
          {"E-186" : {"flightName": "Indigo", "duration": "2h:30m", "baseFare": 8000, "travelTime": "11:13 - 16:13"}},
          {"E-187" : {"flightName": "Indigo", "duration": "6h:30m", "baseFare": 6000, "travelTime": "11:13 - 16:13"}},
          {"E-189" : {"flightName": "Indigo", "duration": "5h:0m", "baseFare": 9907, "travelTime": "11:13 - 16:13"}}
      ],

    "kingfisher": [
          {"E-184" : {"flightName": "KF RED", "duration": "1h:0m", "baseFare": 2819, "travelTime": "10:13 - 11:13"}},
          {"E-184" : {"flightName": "KF RED", "duration": "1h:0m", "baseFare": 2819, "travelTime": "11:13 - 16:13"}},
          {"E-184" : {"flightName": "KF RED", "duration": "2h:30m", "baseFare": 18000, "travelTime": "11:13 - 16:13"}},
          {"E-184" : {"flightName": "KF RED", "duration": "6h:30m", "baseFare": 16000, "travelTime": "11:13 - 16:13"}}
      ]
  }
}

Используется jquery для получения информации: 

$("#list li").delegate("", "click", function(e){
        var dataflightname = $(this).attr('data-flight-name'),
            dataflightid = $(this).attr('data-flight-id');
//            console.log(dataflightname);
//            console.log(dataflightid);
        if($(this).siblings().hasClass('selected')){
          $(this).siblings().removeClass('selected');
          $(this).addClass('selected');
          // Featcing Flights Information
          $.getJSON("javascript/abc.json",function(data){

            $(data.flightInfo[dataflightname][0]).each(function(key, items) {
              $(data.flightInfo[dataflightname][key]).each(function(key, items) {
              //Reading name tag value
              //here i am not getting proper value
              console.log(data.flightInfo[dataflightname][0][items]);
              });
            });
          });
        }
      });

Пожалуйста, помогите понять, почему я не могуполучить все значения.

Ответы [ 4 ]

2 голосов
/ 12 декабря 2011

Синтаксис для .delegate() немного перепутан, получается: $(<root element>).delegate(<selector>, <event>, <callback>). Когда вы пытаетесь получить доступ к вашему объекту JSON, вы добавляете [0] в конец, который не нужен (data.flightInfo[dataflightname][0] должно быть data.flightInfo[dataflightname]): 

$("#list").delegate("li", "click", function(e){
    var $this          = $(this),
        dataflightname = $this.attr('data-flight-name'),
        dataflightid   = $this.attr('data-flight-id');

    if($this.siblings().hasClass('selected')){
      $this.siblings().removeClass('selected');
      $this.addClass('selected');

      // Featcing Flights Information
      $.getJSON("javascript/abc.json",function(data){
        for (var i = 0, len = data.flightInfo[dataflightname].length; i < len; i++) {
            console.log(data.flightInfo[dataflightname][i]);
            //output will be (for the first index): {"E-184" : {"flightName": "Indigo", "duration": "1h:0m", "baseFare": 1753, "travelTime": "11:13 - 12:13"}}
        }
      });
    }
  });

Вот демоверсия: http://jsfiddle.net/HscZX/

Обратите внимание, что я кэшировал селектор $(this) в переменной $this, так как он использовался так много раз, что должно повысить производительность. Также я изменил цикл $.each() для for (var i = 0, len = data.length; i < len; i++) {}, потому что последний выполняет намного быстрее. Проверьте этот jsperf, чтобы увидеть разницу в производительности: http://jsperf.com/for-in-tests/4

1 голос
/ 12 декабря 2011

Отредактируйте свой JavaScript, как показано ниже: 

$("#list li").delegate("", "click", function(e){
    var dataflightname = $(this).attr('data-flight-name'),
    dataflightid = $(this).attr('data-flight-id');
    if($(this).siblings().hasClass('selected')){
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
        // Featcing Flights Information
        $.getJSON("/cygnet-ng/test.json",function(data){
            $(data.flightInfo[dataflightname]).each(function(key, items) {
                $(items).each(function(key1, items1) {
                //Reading name tag value 
                //here i am not getting proper value 
                    for(n in items1){
                           console.log(items1[n].flightName);
                           console.log(items1[n].duration);
                           console.log(items1[n].baseFare);
                           console.log(items1[n].travelTime);
                    }    
                });
            });
        });
    }
});

Это будет повторять данные json.

0 голосов
/ 12 декабря 2011

Давайте проанализируем следующие части кода 

data.flightInfo[dataflightname][0]

С этой строкой вы получите {"E-184" : {"flightName": "Indigo", "duration": "1h:0m", "baseFare": 1753, "travelTime": "11:13 - 12:13"}} для "индиго", которое является только первой записью для этого имени пользователя.

Далее выпытаясь зациклить все ключи для этой записи.Существует только одно: "E-184"

Таким образом, следующая строка кода 

data.flightInfo[dataflightname][key]

будет data.flightInfo["indigo"]["E-184"], что не определено.

РЕДАКТИРОВАТЬ: это поможетопишите, ЧТО именно вы хотите достичь

EDIT2: я думаю, что у вас есть опечатка где-то ... E6-184 из атрибута data-flight-id не соответствует ни одной записи в вашем JSON

0 голосов
/ 12 декабря 2011

сначала: измените структуру данных следующим образом: 

{
    "flightInfo": {
        "indigo": {
            "E-184": {
                "flightName": "Indigo",
                "duration": "1h:0m",
                "baseFare": 1753,
                "travelTime": "11:13 - 12:13"
            },
            "E-185": {
                "flightName": "Indigo",
                "duration": "1h:0m",
                "baseFare": 1753,
                "travelTime": "11:13 - 12:13"
            },
            "E-186": {
                "flightName": "Indigo",
                "duration": "2h:30m",
                "baseFare": 8000,
                "travelTime": "11:13 - 16:13"
            },
            "E-187": {
                "flightName": "Indigo",
                "duration": "6h:30m",
                "baseFare": 6000,
                "travelTime": "11:13 - 16:13"
            },
            "E-189": {
                "flightName": "Indigo",
                "duration": "5h:0m",
                "baseFare": 9907,
                "travelTime": "11:13 - 16:13"
            }
        },

        "kingfisher": {
            "E-184": {
                "flightName": "KF RE}D",
                "duration": "1h:0m",
                "baseFare": 2819,
                "travelTime": "10:13 - 11:13"
            },
            "E-184": {
                "flightName": "KF RED",
                "duration": "1h:0m",
                "baseFare": 2819,
                "travelTime": "11:13 - 16:13"
            },
            "E-184": {
                "flightName": "KF RED",
                "duration": "2h:30m",
                "baseFare": 18000,
                "travelTime": "11:13 - 16:13"
            },
            "E-184": {
                "flightName": "KF RED",
                "duration": "6h:30m",
                "baseFare": 16000,
                "travelTime": "11:13 - 16:13"
            }
        }
    }
}

тогда, что вы хотите:

data.flightInfo[dataflightname][dataflightid]; 

$("#list li").click(function (e) {
    var dataflightname = $(this).attr('data-flight-name'),
        dataflightid = $(this).attr('data-flight-id');
    if ($(this).siblings().hasClass('selected')) {
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
        // Featcing Flights Information
        $.getJSON("javascript/abc.json", function (data) {
            console.log(data.flightInfo[dataflightname][dataflightid]);
        });
    }
});
...