如何将JSON数据带到Javascript表中？

我试图用Javascript将JSON文件中的数据带到表的输入中，这样就可以从表中编辑相同的输入，但只让它带到JSON文件中的最后一个数据（值10和rat10）。我尝试使用其他字段，但他没有带到我这里。 手稿部分

const xhttp = new XMLHttpRequest();
        xhttp.open('GET', 'Datos/datos.json', true);
        xhttp.send();
        xhttp.onreadystatechange = function(){
            if (this.readyState == 4 && this.status == 200) {
                //console.log(this.responseText);
                let datos = JSON.parse(this.responseText);
                // console.log(datos);
                for(let item of datos){
                    document.getElementById('valor').value = `${item.valor}`;       
                    document.getElementById('resultado').value = `${item.resultado}`;       
                    document.getElementById('valor5').value = `${item.valor5}`;     
                    document.getElementById('rat5').value = `${item.rat5}`;     
                    document.getElementById('valor10').value = `${item.valor10}`;
                    document.getElementById('rat10').value = `${item.rat10}`;
                }
            }
        }

JSON

partedelhtml

<td rowspan="8" style="text-align: center; background-color: rgba(7, 129, 7, 0.705);"><form action="Datos/datos.php" id="formdata"><input
                    type="number" class="valor" id="valor" name="valor" ></form></td>
                     <td rowspan="8" style="text-align: center; background-color: rgba(216, 187, 22, 0.911);"><input
                        type="number" class="resultado" id="resultado" name="resultado" ></td>

<td style="text-align: center; background-color:  rgba(7, 129, 7, 0.705);"><Input type="number"
                    id="valor5" name="valor5" > </td> <td
                    style="text-align: center; background-color: rgba(216, 187, 22, 0.911);"><Input
                    type="number" id="rat5" name="rat5"></Input></td>


<tr>
                        <td>BALANCEADOR</td>
                        <td>F5</td>
                        <td>Virtual Server</td>
                        <td style="text-align: center; background-color:  rgba(7, 129, 7, 0.705);"><Input type="number"
                            id="valor10" name="valor10"></Input></td>
                            <td style="text-align: center; background-color: rgba(216, 187, 22, 0.911);"><Input type="number"
                        id="rat10" name="rat10"></Input></td>
                        <td><input type="number" id="resultado10" class="resultado" name="resultado10" readonly></td>
                    </tr>

平衡器
F5
虚拟服务器

---

主要问题是您正在对选择器和值名称进行硬编码。因为对象键是id，值是值，所以只需做出假设并使用它们迭代结果

像这样：

this.readyState=4；
该状态=200；
var responseText=`[{“valor”：“123”，“resultado”：“2”，“resultado2”：“61.5”}，
{“valor1”：“34”，“rat1”：“2”，“result”：“17”}，
{“valor2”：“12”，“rat2”：“2”，“result2”：“6”}，
{“valor3”：“12”，“rat3”：“4”，“resultado3”：“3”}，
{“valor4”：“23”，“rat4”：“2”，“resultado4”：“11.5”}，
{“valor5”：“23”，“rat5”：“4”，“resultado5”：“5.75”}，
{“valor6”：“21”，“rat6”：“2”，“resultado6”：“10.5”}，
{“valor7”：“5”，“rat7”：“7”，“resultado7”：“0.7142857142857143”}，
{“valor8”：“6”，“rat8”：“3”，“resultado8”：“2”}，
{“valor9”：“23”，“rat9”：“2”，“resultado9”：“11.5”}，
{“valor10”：“34”，“rat10”：“4”，“resultado10”：“8.5”}
]`;
if（this.readyState==4&&this.status==200）{
让datos=JSON.parse（responseText）；
datos.forEach（dt=>Object.entries（dt）.forEach（[k，v]）=>{
设el=document.querySelector（“#”+k）；
如果（el）el.value=v；
}));
}

平衡器
F5
虚拟服务器

主要问题是您正在对选择器和值名称进行硬编码。因为对象键是id，值是值，所以只需做出假设并使用它们迭代结果

像这样：

this.readyState=4；
该状态=200；
var responseText=`[{“valor”：“123”，“resultado”：“2”，“resultado2”：“61.5”}，
{“valor1”：“34”，“rat1”：“2”，“result”：“17”}，
{“valor2”：“12”，“rat2”：“2”，“result2”：“6”}，
{“valor3”：“12”，“rat3”：“4”，“resultado3”：“3”}，
{“valor4”：“23”，“rat4”：“2”，“resultado4”：“11.5”}，
{“valor5”：“23”，“rat5”：“4”，“resultado5”：“5.75”}，
{“valor6”：“21”，“rat6”：“2”，“resultado6”：“10.5”}，
{“valor7”：“5”，“rat7”：“7”，“resultado7”：“0.7142857142857143”}，
{“valor8”：“6”，“rat8”：“3”，“resultado8”：“2”}，
{“valor9”：“23”，“rat9”：“2”，“resultado9”：“11.5”}，
{“valor10”：“34”，“rat10”：“4”，“resultado10”：“8.5”}
]`;
if（this.readyState==4&&this.status==200）{
让datos=JSON.parse（responseText）；
datos.forEach（dt=>Object.entries（dt）.forEach（[k，v]）=>{
设el=document.querySelector（“#”+k）；
如果（el）el.value=v；
}));
}

平衡器
F5
虚拟服务器

在您的

for

中，在每次迭代中，您将使用id

resultado9

、

valor10

和

rat10

替换元素中的值。。。。另外，如果您正在设置值，则无需创建像

let valor=…

这样的变量，因为您什么也得不到，只需设置我的建议是，您的问题，发布您的HTML，尝试创建一个。现在，从您的逻辑来看，您的

对于

来说没有什么意义，因为在每次迭代中，您都将元素中的值替换为id

resultado9

、

valor10

和

rat10

。。。。另外，如果您正在设置值，则无需创建像

let valor=…

这样的变量，因为您什么也得不到，只需设置我的建议是，您的问题，发布您的HTML，尝试创建一个。现在，从你的逻辑来看，这没有什么意义

<td rowspan="8" style="text-align: center; background-color: rgba(7, 129, 7, 0.705);"><form action="Datos/datos.php" id="formdata"><input
                    type="number" class="valor" id="valor" name="valor" ></form></td>
                     <td rowspan="8" style="text-align: center; background-color: rgba(216, 187, 22, 0.911);"><input
                        type="number" class="resultado" id="resultado" name="resultado" ></td>

<td style="text-align: center; background-color:  rgba(7, 129, 7, 0.705);"><Input type="number"
                    id="valor5" name="valor5" > </td> <td
                    style="text-align: center; background-color: rgba(216, 187, 22, 0.911);"><Input
                    type="number" id="rat5" name="rat5"></Input></td>


<tr>
                        <td>BALANCEADOR</td>
                        <td>F5</td>
                        <td>Virtual Server</td>
                        <td style="text-align: center; background-color:  rgba(7, 129, 7, 0.705);"><Input type="number"
                            id="valor10" name="valor10"></Input></td>
                            <td style="text-align: center; background-color: rgba(216, 187, 22, 0.911);"><Input type="number"
                        id="rat10" name="rat10"></Input></td>
                        <td><input type="number" id="resultado10" class="resultado" name="resultado10" readonly></td>
                    </tr>