1

Всем привет! Есть файл JSON (можно его изменить для решения задачи). В нем содержатся настройки и данные для автоматического заполнения форм. ID и Имя формы берутся из scID и csName соответственно. В locAct находится массив с переменным количеством элементов. Количество remDevX со своими массивами тоже может быть разным. Каждый объект это так сказать законченый блок с данными, принадлежащими только форме с ID=scID, собственно вопрос:

  1. Как работать с одним объектом json (данные заключенные между {...} ) и только с него брать данные?
  2. Как брать данные с массива в этом объекте?
  3. Как потом переходить к другому объекту и работать с данными только в нем?

Пример JSON

function loadScpts(){	// загрузка сценариев
  document.getElementById('parentScripts').innerHTML = '';	// Очищаем поле для сценариев
var xhttp = createXmlHttpObject();  // Создаем объект
xhttp.open('GET','/scpt.json?'+Math.floor(Math.random()*10000),true); xhttp.send(null);	// читаем файл scpt.json
xhttp.onload = function(e){
	var scpt = JSON.parse(xhttp.responseText);  // Полученные данные записывает в переменную scpt
	for(var key in scpt){readScpt(scpt[key]);}
}
load();
}

function readScpt(object){
  var jsonData = object;
  console.log(jsonData);
  var divScpt = document.createElement("div");
  divScpt.id = "scID"+jsonData.scID;
  divScpt.innerHTML =
  "<fieldset><legend>"+jsonData.scName+"</legend>"+
  "<table><tbody id=\"scTabl"+cntSc+"\">"+
"<tr><td colspan=\"2\"><select class=\"select w100\"></select></td></tr>"+
"<tr id=\"scDev"+cntDev+"\">"+
  "<td><select class=\"select w100\"><option>RemDev</option></select></td>"+
  "<td id=\"itAct"+cntAct+"\"><div id=\"act"+Act+"\"><select class=\"select w85\"><option>"+Act+"</option></select><input class=\"btn w15\" onclick=\"return addAct("+cntAct+")\" type=\"button\" value=\"+\"></div></td>"+
"</tr>"+
  "</tbody></table>"+
  "<input value=\"{{LangAddDev}}\" class=\"btn w85\" onclick=\"return addDev("+cntSc+")\" type=\"button\">"+
  "<input value=\"{{LangDel}}\" class=\"btn w45\" onclick=\"return delEl(this)\" type=\"button\">&nbsp&nbsp"+
  "<input value=\"{{LangSave}}\" class=\"btn w45\" onclick=\"return saveScpt("+divScpt.id+")\" type=\"button\"></fieldset>";
  document.getElementById("parentScripts").appendChild(divScpt);
  load();
  return false;
}

10
  • Распарсить его можно так: var data = JSON.parse(json). Остальная часть вашей задачи либо некорректно сформулирована, либо слишком широкая. Существует миллион и один способ отобразить данные объекта в GUI форму.
    – vp_arth
    19 фев 2017 в 16:00
  • Не темните, добавьте Ваш код с for in в вопрос.
    – user176262
    19 фев 2017 в 18:15
  • Передавайте весь элемент массива в addScpt: addScpt(scpt[key]);
    – user176262
    19 фев 2017 в 18:24
  • вместо addScpt(scID) записать addScpt(scpt[key]);? И что это даст, как дальше работать с объектом? В самой функции addScpt? 19 фев 2017 в 18:31
  • да, в самой функции
    – user176262
    19 фев 2017 в 18:35

1 ответ 1

0

Можно так:

let data = [
  {
    scID: 1, scName: "Scene 1",
    locAct: [
      {
        "{{LangAct1}}": 1,
        "{{LangAct2}}": 2,
        "{{LangAct3}}": 3
      }
    ],
    remDev1: [
      {
        devId: 'C0A8000A',
        devName: '{{MD}}: {{ND}}',
      }
    ],
    remDev2: [
      {
        devId: 'C0A8000B',
        devName: '{{MD}}: {{ND}}',
      }
    ]
  },
  {
    scID: 2, scName: "Scene 2",
    locAct: [
      {
        "{{LangAct1}}": 1,
        "{{LangAct2}}": 2,
        "{{LangAct3}}": 3
      }
    ],
    remDev1: [
      {
        devId: 'C0A8000A',
        devName: '{{MD}}: {{ND}}',
      }
    ],
    remDev2: [
      {
        devId: 'C0A8000B',
        devName: '{{MD}}: {{ND}}',
      }
    ]
  }
];

document.body.insertAdjacentHTML('afterBegin', data.reduce((acc, form) => {
  return acc += `<form id=${form.scID}>
    Форма: ${form.scName}<br /><br />
    locAct: <br />${form.locAct.reduce((a, _) => a += Object.keys(_).map(__ => `&nbsp;Ключ: <strong>${__}</strong>, значение: ${_[__]}<br />\n`).join(''), '')}
    <br />
    
    RemDevs: <br />${Object.keys(form).filter(_ => /^remDev\d+$/.test(_)).reduce((a, dev) => a += `&nbsp;${dev}<br />${form[dev].reduce((a, _) => Object.keys(_).map(__ => `&nbsp;&nbsp;Ключ: <strong>${__}</strong>, значение: ${_[__]}<br />\n`).join(''), '')}\n`, '')}
    <br />
  </form><hr />\n`;
}, ''));

1
  • да, заработало! нужно как то это сейчас причесать. СПАСИБО! 25 фев 2017 в 10:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.