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-get方法中嵌入$ http-post方法？

$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（）的参数发送数据。

angular $http docs

$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之前用于获取/信任过滤器中的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 中，我有一个函数可以处理成功获取文章的逻辑，或者在您的情况下处理您想要的任何对象。它还可以调用＆＃34;转换＆＃34;或者＆＃34;更新＆＃34;或对象：

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

    handleError(res);
}

你看我如何在我的文章上使用过滤器然后返回？我们来看看我的过滤器。

<强> articles.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这样我就可以在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（＆＃39; update＆＃39;）（响应）;并在其他地方处理这种逻辑。

由于关注点分离和功能较小，这种方法不仅更好看，而且更易于维护，因为您现在可以创建区域来获取数据（您的服务），2。转换数据（您的过滤器）， 3.将数据绑定到您的视图（您的控制器）。

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

这只是我的方法，它决不是＆＃34;最好的＆＃34;，但它适用于我，我认为它也可能对你有帮助。

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无法做到这一点。我需要说清楚。

AngularJS - 使用$ http

3 个答案: