向外部JSON文件push数据报错“Undefined is not an object”求助

嘿，我看出来你遇到的问题主要是对JSON数组的结构理解有误，再加上代码里几个语法小错误导致的。咱们一步步拆解问题，把代码修正过来：

核心问题根源 #

你报错的直接原因是尝试调用MyJSON.name.push，但MyJSON本身是一个数组，它根本没有name这个属性——数组里的每一个元素才是包含name和url的对象。所以MyJSON.name是undefined，自然会抛出"Undefined is not an object"的错误。

接下来咱们逐个修正代码里的问题：

1. 修复Add方法（添加新元素） #

你的Add方法里犯了两个错：一是把输入值存到了容易混淆的变量名里，二是push了一个字符串而不是符合结构的对象。

原错误代码：

this.Add = function() {
    el = document.getElementById('add-name');
    el1 = document.getElementById('add-link')
    var url = el.value;
    var url1 = el1.value;
    if (url) {
        if (url) MyJSON.push('{name:"url",url:"url1"}')
        el.value = '';
        this.FetchAll();
    }
}

修正后：

this.Add = function() {
    const nameInput = document.getElementById('add-name');
    const urlInput = document.getElementById('add-link');
    const name = nameInput.value.trim();
    const url = urlInput.value.trim();
    
    // 确保两个输入都不为空
    if (name && url) {
        // 向数组push一个真实的对象，而非字符串
        MyJSON.push({ name: name, url: url });
        // 清空输入框
        nameInput.value = '';
        urlInput.value = '';
        // 更新页面列表
        this.FetchAll();
    }
}

2. 修复Edit方法（编辑元素） #

这里有两个关键错误：一是访问元素name的方式不对，二是更新数组的语法错误。

原错误代码：

this.Edit = function(item) {
    var el = document.getElementById('edit-name');
    el.value = MyJSON.name[item];
    document.getElementById('edit').style.display = 'block';
    self = this;
    document.getElementById('saveEdit').onsubmit = function() {
        var url = el.value;
        if (url) {
            self.name.splice(item, 1, url.trim());
            self.FetchAll();
            CloseInput();
        }
    }
};

修正后：

this.Edit = function(item) {
    const editInput = document.getElementById('edit-name');
    // 正确获取对应索引元素的name值
    editInput.value = MyJSON[item].name;
    document.getElementById('edit').style.display = 'block';
    const self = this;
    
    document.getElementById('saveEdit').onsubmit = function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        const newName = editInput.value.trim();
        if (newName) {
            // 更新数组对应元素的name属性
            MyJSON[item].name = newName;
            self.FetchAll();
            CloseInput();
        }
    }
};

3. 修复Delete方法（删除元素） #

这里错误地调用了MyJSON.urls.splice，但MyJSON本身就是数组，没有urls这个属性。

原错误代码：

this.Delete = function(item) {
    MyJSON.urls.splice(item, 1);
    this.FetchAll();
};

修正后：

this.Delete = function(item) {
    // 直接对MyJSON数组执行删除操作
    MyJSON.splice(item, 1);
    this.FetchAll();
};

额外小建议 #

• 尽量用const/let代替var，避免全局变量污染和变量提升问题
• 可以给输入框添加空值提示，比如当用户没填内容就点击按钮时，弹出提示文本
• 表单提交时加上e.preventDefault()，避免不必要的页面刷新

这样修改后，点击Add按钮就能正常向MyJSON数组添加新元素，Edit和Delete功能也能正常工作啦。

内容的提问来源于stack exchange，提问作者Joanmi