如何通過在文本框中輸入內容來替換文本區域中的JSON文本值

Question

我在文本區域中有JSON。 我必須通過將輸入提供給另一個文本框來替換JSON鍵值。

以下是我的JSON ...我將使用將在文本框中輸入的值來補充name和zoom：max，zoom：min的值。

{
              "deployment": {
                "name": "Leather Cap",
                "zoom": {
                  "max": 400,
                  "min": 170
                },
                "scale": 6.75,
                "gradient": "false",
                "optional": {
                  "fov": 25,
                  "logos": "true",
                  "autoload": "true",
                  "hideInfo": "true",
                  "transparent": "true",
                  "disablePanning": "true",
                  "hideFullscreen": "true"
                },
                "rotation": {
                  "x": 0,
                  "y": 0,
                  "z": 0
                },
                "textures": {
                  "albedo": "albedo.jpg",
                  "preview": "preview.png",
                  "aoIntensity": 0.05,
                  "normalScale": 1,
                  "metalnessValue": 0.65,
                  "roughnessValue": 0.85
                }
              }
           }

這是我的JS：函數updateFunc（）{

 const textField= document.getElementById('myText').value;
 const x=JSON.parse(textField);

 const fname = document.getElementById('tname');
 const newName = JSON.stringify(x).replace(deployment.name, test);
 x.deployment.name = JSON.parse(newName);

 const zMin = document.getElementById('tZmin');
 const newZmin=JSON.stringify(x).replace(deployment.zoom.min, test1);
 x.deployment.zoom.min = JSON.parse(newZmin);

 const zMax = document.getElementById('tZmax');
 const newZmax=JSON.stringify(x).replace(deployment.zoom.max, test2);
 x.deployment.zoom.max =JSON.parse(newZmax);   

}

HTML：

<textarea name='fname'rows="1" cols='1'id='tname'></textarea><br>
            zoom:<br> min:<br>
<textarea name='zoomMin'rows="1" cols='1'id='tZmin'></textarea><br>
            max:<br>
            <textarea name='zoomMax'rows="1" cols='1'id='tZmax'></textarea><br>
 <button type='submit' onclick="updateFunc(); return false;">update JSON</button><br>

我的代碼不起作用。 當我點擊按鈕“更新JSON”。 刷新頁面。

Answer 1

這就是您可以做到的！ 我想使用您的json並編輯您的代碼，但無法跟蹤上面代碼中使用的某些DOM元素。 我希望這是您要尋找的。 如果沒有，那么請盡管分享反饋。

 var jsonObj = { "deployment": { "name": "Leather Cap", "zoom": { "max": 400, "min": 170 } } }; document.getElementById('myText').innerHTML = JSON.stringify(jsonObj); function updateFunc() { let name = document.getElementById('tname').value; let Zmin = document.getElementById('tZmin').value; let Zmax = document.getElementById('tZmax').value; jsonObj.deployment.name = name; jsonObj.deployment.zoom.min = Zmin; jsonObj.deployment.zoom.max = Zmax; document.getElementById('myText').innerHTML = JSON.stringify(jsonObj); } 

 <textarea name='fname' rows="1" cols='1' id='tname'></textarea><br> zoom: <br> min:<br> <textarea name='zoomMin' rows="1" cols='1' id='tZmin'></textarea><br> max: <br> <textarea name='zoomMax' rows="1" cols='1' id='tZmax'></textarea><br> <button type='submit' onclick="updateFunc(); return false;">update JSON</button><br> <div id="myText"></div>