Show JSON data in textbox?-CodePudding

I am trying to display my json data in a table. But I can't get the json data in each column to show in the textbox.

My JSON data

{
    "kisiler" : [
        {
            "ad" : "Ahmet",
            "soyad" : "Koç",
            "yas" : 37,
            "emekli" : false,
            "maas" : null,
            "hobi" : ["müzik","spor","resim"]
        },
        {
            "ad" : "Ümit",
            "soyad" : "Öztürk",
            "yas" : 36,
            "emekli" : false,
            "maas" : 7500,
            "hobi" : ["kaligrafi","spor","müzik"]
        }
     ]  
}

Other than that, my javascript view is like this;

let table = document.getElementById("table")
var myData = fetch("veri.json")
.then(res => res.json())
.then(veri =>{ for (let data in veri){
    for(deger of veri[data]) {
        table.innerHTML =`<tr>
            <td><input type="textbox">${deger.ad}</input></td>
            <td><input type="textbox">${deger.soyad}</input></td>
            <td><input type="textbox">${deger.yas}</input></td>
            <td><input type="textbox">${deger.emekli}</input></td>
            <td><input type="textbox">${deger.maas}</input></td>
            <td><input type="textbox">${deger.hobi}</input></td>
        </tr>`
    }
}})

ad, soyad, maas, emekli vs. etc. I want to have them all displayed inside a textbox.

how can i edit this?

CodePudding user response：

Consider using a textarea instead:

<html>

<head>
</head>

<body>
    <textarea id="output" cols="100" rows="35"></textarea>

    <script>
        const valor = {
            "kisiler": [
                {
                    "ad": "Ahmet",
                    "soyad": "Koç",
                    "yas": 37,
                    "emekli": false,
                    "maas": null,
                    "hobi": ["müzik", "spor", "resim"]
                },
                {
                    "ad": "Ümit",
                    "soyad": "Öztürk",
                    "yas": 36,
                    "emekli": false,
                    "maas": 7500,
                    "hobi": ["kaligrafi", "spor", "müzik"]
                }
            ]
        };

        document.getElementById('output').innerHTML = JSON.stringify(valor, null, 4);
    </script>
</body>

</html>