javascript - jQuery 使用 map() 从所有输入构建 json

标签 javascript jquery json

我正在尝试迭代页面中的所有输入并构建一个 JSON 以通过 post 请求发送到后端:

function getBody() {
         var blocks = $('.list-group-item').map(function(idx, elem) {

            var inputs = $(elem).find('.block-input').map(function (idi, input) {
               //Probably this part needs to change
               return {
                  [$(input).attr('name')]: $(input).val()
               };
            }).get();


            return {
               id: $(elem).data('id'),
               name: $(elem).data('name'),
               inputs,
            };
         }).get();

         var products_json = JSON.stringify(blocks,null,'\t');
         console.log(products_json)
};

它有效,这是我的结果:

[
    {
        "id": 13,
        "name": "About us",
        "inputs": [
            {
                "title": "How we started"
            },
            {
                "paragraph": "We started 5 years ago in a ..."
            }
        ]
    }
]

我想为所有输入返回一个对象,而不是为每个输入返回一个对象,如何使用 map() 将键值对返回到对象?我希望结果如下所示:

[
    {
        "id": 13,
        "name": "About us",
        "inputs": {
            "title": "How we started"
            "paragraph": "We started 5 years ago in a ..."
        }
    }
]

最佳答案

不要使用map来创建inputs对象。使用循环将键/值元素添加到对象。

function getBody() {
  var blocks = $('.list-group-item').map(function(idx, elem) {
    var inputs = {};
    $(elem).find('.block-input').each(function(idi, input) {
      inputs[$(input).attr('name')] = $(input).val();
    });

    return {
      id: $(elem).data('id'),
      name: $(elem).data('name'),
      inputs,
    };
  }).get();

  var products_json = JSON.stringify(blocks, null, '\t');
  console.log(products_json)
};

关于javascript - jQuery 使用 map() 从所有输入构建 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60933918/

相关文章:

javascript - 尝试使用 JSON 的点表示法从 Stripe API 获取特定键值时遇到问题

javascript - Selenium Python : Cannot find element after javascript runs

javascript - google.script.run 执行但返回 "null"而 code.gs 函数确实有/日志值要返回

javascript - 如何在本地包含 jQuery?

jquery - 将 SlickGrid 中的列设为超链接

javascript - jquery ajax,在 GET 调用后在哪里进行异步计算

c# - 如何使用 Json.NET 在 C# 中将根节点添加到 JSON?

javascript - 用图像更新页面内的文本

javascript - 如何改变单元格的背景颜色

javascript - 如何在 React 中解析 JSON 响应中的 bool 值