繁体   English   中英

如何用 Javascript 更改 json

[英]How to Change json with Javascript

https://github.com/smelukov/loftschool-example我正在这个环境中创建我的项目。

我在根文件夹中创建了 friends.json 文件。

朋友们。json

    {
        "name": "Иван",
        "lastName": "Петров",
        "value": "5.24"
    },
    {
        "name": "Иван",
        "lastName": "Петров",
        "value": "6.00"
    },
    {
        "name": "Иван",
        "lastName": "Петров",
        "value": "4.54"
    }
]

索引.hbs

<div id="prev-results"></div>

<button id="loadButton">Load Results</button>

index.js

const loadButton = document.querySelector("#loadButton");
const result = document.querySelector('#prev-results');
 
loadButton.addEventListener('click', () => {
    fetch('friends.json')
        .then(response => {
            if (response.status >= 400){
              return Promise.reject();
            }

            return response.json();
        })
        .then(friends => {
                result.innerHTML = '';
                for (let friend of friends) {
                    const friendNode = createFriendNode(friend);
                

                    
                    result.appendChild(friendNode);

                }
        })
        .catch(() => console.error('Что-то пошло не так'));
});
 
function createFriendNode(friend) {
    const div = document.createElement('div');
    
    
    div.classList.add('friend');
    div.textContent = `${friend.name} ${friend.lastName}`;

    const result = document.createElement("a");
    result.textContent = `${friend.value}`;
    result.classList.add("result");

    const label = document.createElement("a");
    label.classList.add("result-label")
    label.textContent = "mL/min/1.73m²";

    div.appendChild(result);
    div.appendChild(label);
    return div;
}

现在我可以从friends.json获取对象并将它们添加到DOM,但是我如何用javascript更改friends.json?

客户端无法写回它正在服务的 static 文件。 这将是数据库的用例。 对于可以操作的类似 JSON 的文档 object 存储,您可以使用MongoDB 之类的内容。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM