为 JSON 对象创建 CRUD？

Question

我是 javascript 开发的新手，我遇到了一个我认为已经解决但我不知道如何找到答案的问题。

假设我有一个 JSON 对象如下：

// bagelList.json
{
    "description": "The bagel list. Who brings the bagels on what day.",
    "list": [
        {
            "date": "Nov 25",
            "name": "Cory"
        },
        {
            "date": "Nov 26",
            "name": "Jordan"
        }
    ]
}

我想在网页上显示此对象中的信息，但我想漂亮地显示它 - 而不是直接打印 JSON。我还希望允许用户更新列表、添加新条目、修改描述等。

我可以这样显示数据：

$( document ).ready(function() {

    $.getJSON('bagelList.json', function(bagelData) {

        var items = [];
        $.each( bagelData.list, function( index, bagelAssignment ) {
            items.push( "<tr><td contenteditable="true">"
                        + bagelAssignment.date + "</td><td>"
                        + bagelAssignment.name + "</td></tr>" );
        });

        $("tbody#schedule").append( items.join( "" ) );

    });

});

但是，由于嵌入在 html 中，所有数据现在都被混淆了一点。我可以编写一个解析器来遍历所有表条目并在用户更新项目后重新创建原始 JSON 对象，但这似乎是一个杂项。

什么是建模数据的正确方法，使其可以以吸引人的方式显示，但保留从对象读取和写入的能力？

我认为这个问题之前已经解决了很多次，所以我不想在编写 CRUD 的道路上走得太远，却发现我只需要做 XYZ 就可以了。

Answer 1

有 jtable 之类的项目 (http://www.jtable.org/Demo/Filtering , https://github.com/hikalkan/jtable)

但我对此的看法 - 我认为在少数情况下您需要一个具有纯 CRUD 操作的表；通常它会更流畅，更具体到您的问题/领域。 我会去Angular。有人还提到了backbone.js，但我认为在角度上它会是无缝的。

如果你走的是角度路径，我推荐egghead，那里有很棒的视频。