Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.02.2017, 23:01
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

Зависимые списки (select) на основе данных JSON
Всем привет! Очень нужна помощь. Принимаю от устройства пакет JSON такого формата:
[
    {
        "{{e1}}":[{"{{c1}}":"1", ... ,"{{cN}}":"5"}], 
        ...
        "{{eN}}":[{"{{c1}}":"1", ... ,"{{cN}}":"5"}]
    }
]


В объекте находятся элементы {{e}}, каждый со своим массивом. Реализованы зависимые элементы select.
В первом select - все названия ключей от {{e1}} до {{eN}}
Во втором select - все названия ключей от {{c1}} до {{cN}} со значением value соответствующего {{c}} (в зависимости от выбранного {{e}})

Ниже по форуму организована реализация.

Возникли некоторые дополнения:
- Почему то не работает, если включить переводчик (LangTranslation(dicTrans)

Последний раз редактировалось mcmega, 25.02.2017 в 15:27.
Ответить с цитированием
  #2 (permalink)  
Старый 23.02.2017, 23:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

mcmega,
зачем два раза получать одно и тоже?
в чём проблема создать селектор?
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2017, 06:54
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

Сообщение от рони Посмотреть сообщение
mcmega,
зачем два раза получать одно и тоже?
в чём проблема создать селектор?
1. Нужно получать одно и тоже, потому что таких селекторов должно быть несколько на странице и их количество разное, каждый блок селекторов под своим ID
2. Проблема не в создании select, а в том, как добавлять элементы option в select в соответствии с данными из json динамически в зависимости от выбранного Event-а
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2017, 08:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

mcmega,
1. если функции на 99% совпадают, значит нужна одна с дополнительным параметром, а может и его ненадо, но дело ваше, сколько функций.
2. есть обьект с данными - есть ключ первого селектора -- выбрали по ключу данные -- создали второй селектор
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2017, 08:24
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

Сообщение от рони Посмотреть сообщение
mcmega,
1. если функции на 99% совпадают, значит нужна одна с дополнительным параметром, а может и его ненадо, но дело ваше, сколько функций.
2. есть обьект с данными - есть ключ первого селектора -- выбрали по ключу данные -- создали второй селектор
разница в функциях в том, что первая должна работать с 1-ым обьектом в json, а вторая со вторым, ну и сформированый блок из селектов должен попадать в свое место.
Теория мне понятна и логична, я не знаю как это реализовать
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2017, 09:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

mcmega,
а так нельзя сделать?
function loadAPI(cnt,num){var apiData=JSON.parse(xhttp.responseText)[num];}
Ответить с цитированием
  #7 (permalink)  
Старый 24.02.2017, 09:55
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

Сообщение от рони Посмотреть сообщение
mcmega,
а так нельзя сделать?
function loadAPI(cnt,num){var apiData=JSON.parse(xhttp.responseText)[num];}
Спасибо, работать по обьектно с данными json получилось.
А что дальше делать, как создать селект с именами ключей и добавить 2-ой зависимый селект?
Ответить с цитированием
  #8 (permalink)  
Старый 24.02.2017, 10:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

зависимые селекты из json
mcmega,

медитируйте ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<div class="demo"></div>
<div class="show"></div>
<script>

var apiData = [{"В" : [{ "кричалки" : 5, "дразнилки" : 8 }], "голове" : [{}], "моей" : [{}], "опилки" : [{}]},
{"Сочиняю" : [{ "Шумелки" : 15, "пыхтелки" : 18, "сопелки" : 34}], "я" : [{}], "неплохо" : [{}], "иногда" : [{}]}
];

function set_select(select, data) {
    select.options.length = 0;
    Object.keys(data).forEach(function(key, k) {
        var value = typeof data[key] == "object" ? key : data[key];
        select.options[k] = new Option(key, value)
    })
}

function createS(selector, obj) {
    selector = document.querySelector(selector);
    var sel = document.createElement("select");
    var selTwo = sel.cloneNode();
    set_select(sel, obj);
    selector.appendChild(sel);
    selector.appendChild(selTwo);
    function test()
    {
      alert(this.value)
    }
    function change_select() {
        set_select(selTwo, obj[this.value][0]);
        test.bind(selTwo)()
    }

    sel.addEventListener("change", change_select);
    selTwo.addEventListener("change", test);
    change_select.bind(sel)()
};
createS(".demo", apiData[0])
createS(".show", apiData[1])


  </script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 25.02.2017, 13:35
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

Круто, все заработало, спасибо огромное!
Скажите, а как сделать чтоб при повторном вызове createAPISelect не создавался новый селектор, а менялся текущий?

Последний раз редактировалось mcmega, 25.02.2017 в 15:14.
Ответить с цитированием
  #10 (permalink)  
Старый 25.02.2017, 14:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

mcmega,
<!doctype html>
<html>
<head>
  <title>Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
  <input value="Events" class="btn w45" onclick="createAPISelect('#eve', api[0]);" type="button">
  <input value="Actions" class="btn w45" onclick="createAPISelect('#act', api[1]);" type="button">
  <div id="eve"></div>
  <div id="act"></div>

</body>
  <script type="text/javascript">
var api =
[
  { "{{e1}}":[{"{{c1}}":"1","{{c2}}":"2","{{c3}}":"3"}],"{{e2}}":[{"{{c1}}":"1","{{c2}}":"2","{{c3}}":"3"}] },
  { "{{a1}}":[{"{{o1}}":"1","{{o2}}":"2","{{o3}}":"3"}],"{{a2}}":[{"{{o1}}":"1","{{o2}}":"2","{{o3}}":"3"}] }
];
// Загрузка API устройства
function setSelect(sel,obj){
  sel.options.length=0;
  Object.keys(obj).forEach(function(key,k){
    var value=typeof obj[key]=='object' ? key : obj[key];
    sel.options[k]=new Option(key,value);
  })
}
function createAPISelect(id,obj){
  var parEl=document.querySelector(id);
  var select = parEl.querySelectorAll('select')
  var sel = select.length ? select[0] : document.createElement('select');
  var selTwo = select.length == 2 ? select[1] : sel.cloneNode();
  setSelect(sel,obj);
  parEl.appendChild(sel);
  parEl.appendChild(selTwo);
  function changeSelect(){setSelect(selTwo,obj[this.value][0]);}
  sel.addEventListener('change',changeSelect);
  changeSelect.bind(sel)();
  //load();
}
  </script>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
зависимые UL LI вместо select (Застрял) chelkaz Элементы интерфейса 18 03.03.2015 10:04
Вставка json данных 1lider AJAX и COMET 5 14.02.2015 20:18
зависимые списки select zazula Элементы интерфейса 48 13.05.2014 20:42
Сортировка JSON данных в цикле Fareastaz jQuery 12 15.03.2013 18:20
Javascript SELECT - зависимые списки zakbc Events/DOM/Window 3 12.01.2013 22:37