Hello! There is a JSON file (you can change it to solve the problem). It contains settings and data for automatic form filling. The form ID and name are taken from scID and csName respectively. In locAct is an array with a variable number of elements. The amount of remDevX with its arrays can also be different. Each object is, so to speak, a complete block with data belonging only to the form with ID = scID, the actual question:

  1. How to work with one json object (data prisoners between {...}) and only take data from it?
  2. How to take data from an array in this object?
  3. How then to move to another object and work with data only in it?

JSON example

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; }

  • You can parse it like this: var data = JSON.parse(json) . The rest of your task is either incorrectly formulated or too broad. There is a million and one way to display object data in a GUI form. - vp_arth
  • Don't darken, add your for in code to the question. - Igor
  • Transfer the entire array element to addScpt : addScpt(scpt[key]); - Igor
  • instead of addScpt (scID) write addScpt (scpt [key]) ;? And what it will give, how to continue to work with the object? In the addScpt function itself? - Oleg Perevyshin
  • Yes, in the function itself - Igor

1 answer 1

It is possible so:

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

  • yes, it worked! you need to brush it now. THANK! - Oleg Perevyshin