Парсер JSON с массивами

410

20 февраля 2017, 18:57

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

Как работать с одним объектом 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; 
}

Answer 1

Можно так:

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`; 
}, ''));