creation of a JSON file from HTML page with one input

Question

For now I am trying with an input type = "text"

<label for="psw"><b>name</b></label>
<input type="text" placeholder="Insert ValueXml value" name="psw" required>

to generate a JSON file with default values, where the input changes only this value ("ValueXml": "Accounting Header 1"). This should be the JSON that should come out (a lot of values are prefixed so I don't have to change them all)

{
    "fileType": {
        "accountingType": {
            "docGroup": 100,
            "docApp": 100,
            "decimals": 2
        }
    },
    "data": {
        "format": "documentchange",
        "error": "",
        "data": [
            {
                "document": {
                    "fileVersion": "1.0.0",
                    "creator": {
                        "name": "FinancialPlaWriter",
                        "version": "1.0.0"
                    },
                    "dataUnits": [
                        {
                            "nameXml": "FileInfo",
                            "data": {
                                "rowLists": [
                                    {
                                        "rows": [
                                            {
                                                "fields": {
                                                    "SectionXml": "Base",
                                                    "IdXml": "HeaderLeft",
                                                    "ValueXml": "Accounting Header 1"
                                                },
                                                "operation": {
                                                    "name": "modify"
                                                }
                                            },
                                            {
                                                "fields": {
                                                    "SectionXml": "AccountingDataBase",
                                                    "IdXml": "OpeningDate",
                                                    "ValueXml": "20210101"
                                                },
                                                "operation": {
                                                    "name": "modify"
                                                }
                                            },
                                            {
                                                "fields": {
                                                    "SectionXml": "AccountingDataBase",
                                                    "IdXml": "ClosureDate",
                                                    "ValueXml": "20231231"
                                                },
                                                "operation": {
                                                    "name": "modify"
                                                }
                                            }
                                        ]
                                    }
                                ]
                            }
                        }
                    ]
                }
                        
            }
                                            
        ]
    }
}

example "ValueXml": "Accounting Header 1", he wants the user to enter the name he wants like: "ValueXml": "MAMMA_MIA" through an HTML input such as:

so I don't know how to create such a JSON file without blowing my head Do you by any chance know a way?

How do you know which `ValueXml` property to change? Based on the previous value of the input? Some other method? How do you get the initial JSON? There are lots of unknowns in this question. — Heretic Monkey, Aug 31 '21 at 15:20
I know that I have to change only the value with indicated: "ValueXml": "Accounting Header 1" all other values do not change this json generated by itself after I clicked a button on the page. this json should be sent to open a program remotely but for now i want to understand how to create this json file — Olli, Sep 01 '21 at 07:36
JSON files are text files. So [create text file using javascript](https://stackoverflow.com/q/36082487/215552) and put those contents in it. — Heretic Monkey, Sep 01 '21 at 11:34

I'm Weverton · Answer 1 · 2021-08-31T15:18:28.177

If I understand right you want to generate a json file that already has default values, and you want to change only one field, right? English is not my language too :)

Try this code:

    //this function get the value of input and changes "ValueXml" if it has a value;
    function makeJson(){
     let inputValue = document.getElementById('inputId').value;
     //put your json here
     return {
       "data": {
          "ValueXml": inputValue  ?? "Accounting Header 1"
        }
     }
    }

    //Generate jsobject as json file
    //Credits: https://stackoverflow.com/questions/19721439/download-json-object-as-a-file-from-browser
    function downloadObjectAsJson(exportObj, exportName){
        var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
        var downloadAnchorNode = document.createElement('a');
        downloadAnchorNode.setAttribute("href",     dataStr);
        downloadAnchorNode.setAttribute("download", exportName + ".json");
        document.body.appendChild(downloadAnchorNode); // required for firefox
        downloadAnchorNode.click();
        downloadAnchorNode.remove();
      }

    //now call functions
   function download(){ downloadObjectAsJson(makeJson(), 'myjsonfile'); }

<input id="inputId" value="Change me!" />
<button onclick="download">download json</button>

score -1 · Answer 2 · answered Aug 31 '21 at 14:58

Try this method.

const inputXml = document.getElementById("inputXml").value;


function xmlToJsonFunc(xml) {
    const json = {};
    for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
        const key = res[1] || res[3];
        const value = res[2] && xmlToJsonFunc(res[2]);
        json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null;

    }
    return json;
}


console.log(xmlToJsonFunc(inputXml) );

<input id="inputXml" value="<tagHead>tag content</tagHead><tagBody><insideTag>inside content</insideTag><emptyTag/></tagBody><tagFooter>another content</tagFooter>" />

Answers without explanation tend to get downvoted more than answers with explanation. Also, besides the suffix "Xml", there is nothing in the question asking for XML; the tags, the question body, everything points toward needing JSON output. — Heretic Monkey, Aug 31 '21 at 15:22

creation of a JSON file from HTML page with one input

2 Answers2