window.fdi = window.fdi || {};
window.fdi.datasF1 = [{
    "Title": "My 'title'",
    "Age": 12,
    "Male": true,
    "description": "popo \r pipi",
    "popopopopopopopopopopopopopopopopopo": 12.45
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
},
{
    "Title": "My 'title'  > oo",
    "Age": 12,
    "Male": true,
    "description": "popo  pir msorvh mrvuhsmorvhqrevhomrvh  moirvhs  cmlck pipi",
    "popopopopopopopopopopopopopopopopopo": 12.450000121244646546568684684846,
    "bla bla": 12
}
];

window.fdi.addElement = function (parent, elementName, innerData = null, style = null) {
    var elem = document.createElement(elementName);
    if (innerData != null)
        elem.innerText = innerData;
    if (style != null) {
        var attr = document.createAttribute("style");
        attr.value = style;
        //elem.attributes.push(attr);
        elem.style = style;
    }
    return parent.appendChild(elem);

}

window.fdi.addHeaders = function (target, headers) {
    var row = fdi.addElement(target, "div", null, "display: flex;flex-wrap: wrap;");
    var divWidth = parseInt(100 / headers.length);
    for (var i = 0; i < headers.length; i++) {
        window.fdi.addElement(row, "div", headers[i], `width:${divWidth}%;overflow-wrap: anywhere;margin-bottom:5px;font-weight: 600;overflow: auto;resize:both;`);
    }
}

window.fdi.addData = function (target, headers, data, index = 0) {
    var row = fdi.addElement(target, "div", null, "display: flex;flex-wrap: wrap;");
    var divWidth = parseInt(100 / headers.length);
    for (var i = 0; i < headers.length; i++) {
        let dat1 = data[headers[i]];
        if(headers[i].indexOf('/') > 0){
            const hh = headers[i].split('/');
            dat1 = data[hh[0]][hh[1]];
        }
        if (index % 2 == 0)
            window.fdi.addElement(row, "div", `${dat1}`, `width:${divWidth}%;overflow-wrap: anywhere;margin-bottom:5px;background-color: #DEDEDE;overflow: auto;resize:both;`);
        else
            window.fdi.addElement(row, "div", `${dat1}`, `width:${divWidth}%;overflow-wrap: anywhere;margin-bottom:5px;overflow: auto;resize:both;`);
        //var pp = window.fdi.addElement(row, "div", `${data[headers[i]]}`, `background-color: #DEDEDE;overflow: auto;resize:both;`);
        //console.log("pp", pp);
    }
}
window.fdi.dojob = function (target = "fdi1", columns = "Title,Age,Male,description,popopopopopopopopopopopopopopopopopo,bla bla", datas = window.fdi.datasF1) {
    console.log("target", target);
    console.log("columns", columns);
    console.log("datas", datas);

    window.fdi.target = document.getElementById(target);
    var columnsArr = columns.split(",");
    console.log("columnsArr", columnsArr);
    window.fdi.addHeaders(window.fdi.target, columnsArr);
    for (i = 0; i < window.fdi.datasF1.length; i++) {
        window.fdi.addData(window.fdi.target, columnsArr, datas[i], i);
    }
}

window.fdi.dojob2 = function (target = "fdi1", columns = "Title,Age,Male,description,popopopopopopopopopopopopopopopopopo,bla bla") {
    console.log("target", target);
    console.log("columns", columns);

    var dt = document.getElementById("content1");
    var hd = document.getElementById("content2");
    console.log("dt", dt);
    //console.log("dt", dt.value);
    content2
    window.fdi.target = document.getElementById(target);
    window.fdi.target.innerHTML = "";
    var columnsArr = hd.value.split(",");
    console.log("columnsArr", columnsArr);
    window.fdi.addHeaders(window.fdi.target, columnsArr);
    var ddd = JSON.parse(dt.value);
    console.log("ddd", ddd);
    for (i = 0; i < ddd.length; i++) {
        window.fdi.addData(window.fdi.target, columnsArr, ddd[i], i);
    }
}


window.fdi.dojob3 = function ()
{
    var dt = document.getElementById("content1");
    var p = JSON.parse(dt.value);
    dt.value = JSON.stringify(p);
}


window.fdi.getHeaders = function ()
{
    var dt = document.getElementById("content1");
    var p = JSON.parse(dt.value);
    let h = "";
    for(let prop in p[0]){
        console.log("p", prop);
        h += `${prop},`.trim('{').trim('}');
    }
    dt = document.getElementById("content2");
    dt.value = h;
}