JSON-файл для чтения с плагином Select2

0

У меня есть этот файл JSON (усеченный):

{
    "** Please contact a mod by posting on the forums **": {
        "tvdb_id": "257937",
        "last_updated": 1341780286,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/17288.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/17288.jpg"
        }
    },
    "Jamies Best Ever Christmas": {
        "tvdb_id": "214161",
        "last_updated": 1329701153,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/9126.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/9126.jpg"
        }
    },
    "Kuromajo-san ga Tooru!!": {
        "tvdb_id": "257914",
        "last_updated": 1395775431,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/15640.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/15640.jpg"
        }
    }
}

и этот код:

$(".tvshow").select2({
  placeholder: "Type in a TV show",
  multiple: true,
  maximumSelectionSize: 1,
  minimumInputLength: 2,
  maximumInputLength: 20,
  query: function(query) {
    var data = {results: []};
    var value = $(".select2-input").val();
    $.ajax ({
      type: "GET",
      url: 'shows.json',
      dataType: "jsonp",
      json: "callbackname",
      crossDomain : true,
      success: function (result) {
        $.each(result, function (i, show) {
          // write everything in an array
          data.results.push({id: this.tvdb_id, text: this.title, poster: this.images.poster, bg: this.fanart });
          console.log(this.title);
          selectedTVshow = this.title;
          // results = data.results;

          // return array
          query.callback(data);
        })
      },
      error: function (data) {
        // console.log('error');
      }
    })
  }
})

Когда я ищу Jamies Best Ever Christmas я хочу, чтобы он вернул имя и соответствующий tvdb_id и детали.

В моем приведенном выше коде вы можете увидеть console.log(this.title); , Это неверно, потому что в объекте JSON нет значения title: value. Как я могу заставить это работать и получать данные?

Демо: http://jsfiddle.net/6pGFC/ (используйте первое поле ввода, чтобы получить автозаполнение, а не второе)

Большое спасибо!

  • 0
    Я оставил ответ на другой ваш вопрос, который, кажется, соответствует тому, что вы хотите сделать. Можете ли вы помочь мне понять, почему этот ответ не сработает?
  • 0
    @VishalKotcherlakota: потому что я не использую Underscore.js. И он выдает консольную ошибку как есть: «Ресурс интерпретируется как Script, но передается с MIME-типом text / plain»
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

В вашем примере есть несколько проблем.

  1. Вы Dropbox файл не JSONP. Это JSON. (поэтому jquery не может разобрать его)
  2. Поскольку вы выполняете итерацию над объектом, а не над массивом с параметром $.each аргументы, переданные функции, являются key и value, поэтому в вашем случае i является ключом. (см. https://api.jquery.com/jQuery.each/)

В общем случае поиск должен происходить на стороне сервера, а не на клиенте (особенно для файлов размером 5 МБ)

Вот демонстрация, которая исправлена (я повторно загрузил исправленный файл в мой Dropbox) вышеупомянутые две проблемы: http://jsfiddle.net/6pGFC/3/
(слишком медленно, хотя, поскольку он пытается отобразить все json)

Поделиться
  • 0
    Большое спасибо! :)
1

Похоже, вы хотите сделать операцию сопоставления, чтобы преобразовать данные в нечто более удобное для работы. Underscore.js - фантастический инструмент для этого.

var mappedResults = _.map(result, function(key, value, list) {
    return {name:key, tvdb_id:value.tvdb_id};
});

Это изменит это:

{
    "** Please contact a mod by posting on the forums **": {
        "tvdb_id": "257937",
        "last_updated": 1341780286,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/17288.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/17288.jpg"
        }
    },
    "Jamies Best Ever Christmas": {
        "tvdb_id": "214161",
        "last_updated": 1329701153,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/9126.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/9126.jpg"
        }
    },
    "Kuromajo-san ga Tooru!!": {
        "tvdb_id": "257914",
        "last_updated": 1395775431,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/15640.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/15640.jpg"
        }
    }
}

... в это:

[
    {name:"** Please contact a mod by posting on the forums **", tvdb_id:"257937"},
    {name:"Jamies Best Christmas", tvdb_id:"21461"},
    {name:"Kuromajo-san ga Tooru!!", tvdb_id:"257914"}
]

После этого вы можете отфильтровать его так:

function getMatchingIds(searchterm) {
    return _.filter(mappedResults, function(entry) {
        return (entry.name.indexOf(searchterm) != -1);
    }
}

Я также должен добавить, что jQuery имеет свою функцию $.map которая делает что-то подобное.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню