AngularJS-使用$ http更新數組內的嵌套對象屬性

Question

我有一個包含對象數組的JSON文件。 像這樣

[
    { "id": 1, "properties": { "name": "Sam", "color": "blue" } },
    { "id": 2, "properties": { "name": "George", "color": "green" } }
];

單擊一個按鈕，我需要更新此文件。 我需要更改數組內第一個對象的properties屬性內的name屬性。

<button ng-click="updateProperties()">Update Names</button>

我知道解決方案涉及$http

我在想也許$ http-post方法嵌套在$ http-get方法內？

$scope.updateProperties = function() {
    $http.get('data.json')
        .then(function(response) {
            var name = response.data[0].properties.name;
            $http.post('data.json') {
                .then(function(response) {
                    response.data[0].properties.name = 'Lucas';
                });
            }
        });

祝好運！ 這是困難的一個。

Answer 1

您可能應該接受一個函數參數。 另外，為什么要在發布后嘗試修改它（大概是發布會更新服務器）。 檢索，修改，然后回發到服務器。 另外，您還應該使用$ http.post（）參數來發送數據。

角$ http文檔

 $scope.updateProperties = function() { // Update what with what??? Use one or more arguments? return $http.get('data.json') // You could take the URL as argument .then(function(response) { response.data[0].properties.name = 'Lucas'; // Maybe use a function argument instead? return $http.post('data.json', response.data); }) } 

Answer 2

我認為您正在做的事情將是一項常見的任務，並且您希望通過在一個函數/文件中沒有大量代碼以及能夠更輕松地查找和維護它來使您的生活更輕松。

我為博客構建了一個API，並在前端使用了AngularJS。 該博客要求呈現HTML，以便在前端顯示為已解析的html，而不是顯示為文本。

我本可以在html中使用過濾器，並且只做了<h1 ng-bind-html="article | rawHtml"></h1> 。 問題已解決，只需要一個簡單的過濾器。 但是我沒有這樣做，因為我認為在HTML甚至不包含HTML之前就已經值得信任了會更好。

通過遵循一種我曾經在過濾器到達HTML之前對HTML進行獲取/信任的類似解決方案，這使我找到了您的問題的答案。 這也是您如何處理更新對象的邏輯 。

嘗試以下方法：

在article.service.js中 ，我有一個將獲得一篇文章的函數。 在成功承諾中，您會看到我具有responseService.handleArticles 。 這將為我完成html的獲取/信任工作：

function getOne(slug) {
    return $http.get(config.url + "/articles/" + slug)
        .then(responseService.handleArticles, responseService.handleError);
}

在response.service.js中 ，我有一個函數可以處理成功獲取文章或您想要的任何對象的邏輯。 它還調用執行“轉換”或“更新”或對象：

function handleArticles(res) {
    if (typeof res.data === 'object')
        return $filter('articles')(res.data); // LOOK HERE

    handleError(res);
}

您了解我如何在文章上使用過濾器然后返回嗎？ 讓我們看看我的過濾器內部。

article.filter.js：

function articles($filter) {
    return filter;

    function filter(data) {
        if (data.hasOwnProperty('article'))
            beautifyHtml(data.article, $filter);
        else if (data.hasOwnProperty('articles'))
            for (var i = 0; i < data.articles.length; i++)
                beautifyHtml(data.articles[i], $filter);

        return data;
    }
}

function beautifyHtml(article, $filter) {
    var trustedTitle = $filter('getTrustedHtml')(article.title);
    var trustedBody = $filter('getTrustedHtml')(article.body);

    article.title = $filter('renderHtml')(trustedTitle);
    article.body = $filter('renderHtml')(trustedBody);
}

如您在上面的articles過濾器中所看到的，我會收錄一篇文章或多篇文章，然后處理它們上的邏輯（使用其他函數/過濾器）以從響應中獲取HTML並信任它，以便我可以使用它在ng-bind-html中的ng-bind-html中，而不必將其通過管道傳遞到我的過濾器中。

這是您要添加邏輯以更新特定屬性的地方。

例如，您可能有一個名為update的過濾器，它將執行類似於我的文章過濾器的一組數據，然后對其進行處理，然后將其返回。

對於您的情況：

$scope.updateProperties = function() {
    $http.get('data.json')
        .then(function(response) {
            $http.post('data.json') {
                .then(function(response) {
                    $filter('update')(response);
                });
            }
        });

在update過濾器中，您可能會遇到以下內容：

function update($) {
    return filter;

    function filter(response) {
        response.data[0].properties.name = 'Lucas';

        return response;
    }
}

以后在更新多個屬性名稱時，這將非常有幫助。 如果您有15個需要某種數據處理的屬性，該怎么辦？ 在服務http調用中處理所有這些邏輯不是理想的。 它很快就會變得非常混亂。 相反，使用一行$ filter（'update'）（response）; 並在其他地方處理該邏輯。

這種方法不僅具有更好的關注點和較小的功能，而且看起來更易於維護，因為您現在可以創建以下區域：1.獲取數據（您的服務），2.轉換數據（您的過濾器），3.綁定數據到您的視圖（您的控制器）。

                 Service gets data
                         |
                         |
               Filter manipulates data
                         |
                         |
          Service returns manipulated data
                         |
                         |
     Controller gets returned data from service
                         |
                         |
             Happy HTML and happy coder

這只是我的方法，絕不是“最好的”方法，但是它對我有用，我認為它也可能對您有所幫助。

Answer 3

使用客戶端JavaScript寫入文件是不可能的。 為此，您需要使用服務器端語言，例如PHP或Node.js。

由於這是標記為JavaScript的，因此節點將是我使用的解決方案

具體來說，我們正在尋找fs模塊。 這樣的事情可能會起作用

fs.readFile(USERS_FILE, function(err, data) {
    var data = JSON.parse(data);

    var named = data.filter(function(d) {
        return d["name"] != "";
    });

    var unNamed = data.filter(function(d) {
        return d["name"] == "";
    });

        named[0]["name"] = "Henry";
        if (data.length === named.length) {
            fs.writeFile(FILE, JSON.stringify(named));
        }
        else {
            allFiles = named.concat(unNamed);
            fs.writeFile(FILE, JSON.stringify(allFiles));
        }

    });

對於嵌套對象，您將使用一對額外的括號。

但這對於客戶端JavaScript是不可能的。 我需要說清楚。