json 如何为数组中每个哈希创建复选框?

brc7rcf0  于 2023-02-17  发布在  其他
关注(0)|答案(1)|浏览(109)

我有一个.JSON文件,其中包含一个散列数组,每个散列包含一些信息。无论如何,我想写一个代码,为每个散列创建一个复选框,前提是代码必须是动态的(如果数组中的散列数量发生变化,代码仍然有效)
我在后端使用Ruby,在前端使用HTML/JavaScript
我能够得到一个方法,将.json文件转换成“我可以使用的有用的东西”:D

response = HTTParty.get("file.json")
i = JSON.parse(response.body)

我学会了如何在HTML中创建复选框

<input type="checkbox" name="check" value="check1">option 1< br>

但我知道这不会为数组中的项(在本例中为散列)创建复选框,我希望它重复“x”次(假设“x”是数组中的散列数)

ny6fqffe

ny6fqffe1#

它将在窗口完成加载时执行。它使用异步箭头函数从远程服务器获取数据并将其显示在网页上。该函数使用fetch从特定URL的服务器获取数据()方法,并期望响应为JSON格式,然后检查响应是否为数组,如果是,它使用for循环和模板文字为响应中的每个元素创建一个HTML元素。HTML元素包括响应中每个元素的复选框输入和标签。最后,它将ID为“data”的元素的innerHTML设置为上一步中创建的HTML。它在网页上显示数据。如果从服务器获取数据或解析响应时出错,它会将错误消息记录到控制台。

window.onload = function() {
(async () => {
    try {
        let data = ``;
        let response = await fetch('https://reqbin.com/echo/get/json', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
        },
        })
        response=  response.json();
        if (!Array.isArray(response)) throw Error(`Invalid response. Expecting Array found ${typeof response}`);
        for (const element of response) {
            data+= `
            <p>
                <input type="checkbox" value="${element}" title="${element}" id="${element}"/>
                <label for="${element}">${element}</label>
            </p>
            `
        }
        document.getElementById("data").innerHTML = data;
    } catch (error) {
        console.error("Error", error.message)
    }
})()
};

相关问题