如何将 JSON 对象添加到 API 调用答案

【问题标题】：How to add Object of JSON to an API Call如何将 JSON 对象添加到 API 调用
【发布时间】：2020-03-31 12:15:17
【问题描述】：

我在一个动态创建的数组中有 x 个对象。我想通过 API 发送来单独保存这些对象。问题是可以有 x 个对象。编写一个循环来读取属性名称及其属性值并点击 api，然后读取第二个属性及其值并点击 api 的最佳方法是什么。

所以基本上一次api只会保存一个对象。即

{
        "attributeName": "s1",
        "attributeValues": [
          "a",
          "b"
        ]
      }

我的 JSON 对象如下所示：

[
  {
    "attributeName": "s1",
    "attributeValues": [
      "a",
      "b"
    ]
  },
  {
    "attributeName": "s2",
    "attributeValues": [
      "c",
      "d"
    ]
  },
  {
    "attributeName": "d1",
    "attributeValues": [
      "p",
      "q"
    ]
  },
  {
    "attributeName": "d2",
    "attributeValues": [
      "r",
      "s"
    ]
  },
  {
    "attributeName": "",
    "attributeValues": [
      ""
    ]
  },
  {
    "attributeName": "d2",
    "attributeValues": [
      "r",
      "s"
    ]
  }
]

我想选择属性名称及其值，然后将其发送到 API。

或者说，我将整个 JSON 保存到 API，那么如果我事先不知道属性名称，我该如何过滤掉单个对象。还有什么其他方法可以获取属性名称列表。

【问题讨论】：

那么你想将数组的每个对象一个一个发送给API？
我想知道你为什么要如此频繁地访问服务器，但为了实现你想要的，是什么阻止你将 POST 请求放入 forEach 函数中？

标签： javascript json angular typescript

【解决方案1】：

如果你想要以下格式的 json

[
  {'s1':['a','b']},
  {'s2':['c','d']},
  {'d1':['p','q']},
  {'d2':['r','s']},
  {'':['']},
  {'d2':['r','s']}
]

然后您可以对单个孩子进行 api 调用，或发送整个数组。

var arr = [
  {
    "attributeName": "s1",
    "attributeValues": [
      "a",
      "b"
    ]
  },
  {
    "attributeName": "s2",
    "attributeValues": [
      "c",
      "d"
    ]
  },
  {
    "attributeName": "d1",
    "attributeValues": [
      "p",
      "q"
    ]
  },
  {
    "attributeName": "d2",
    "attributeValues": [
      "r",
      "s"
    ]
  },
  {
    "attributeName": "",
    "attributeValues": [
      ""
    ]
  },
  {
    "attributeName": "d2",
    "attributeValues": [
      "r",
      "s"
    ]
  }
];

var obj = arr.map((o1) => {
  var o = {};
  o[o1.attributeName] = o1.attributeValues;
  return o;
});

console.log(JSON.stringify(obj));

【讨论】：

【解决方案2】：

检查数据的频率。如果 FrontEnd 上的数据太多，那么最好在块中发送。否则可以在FE上积累然后发送。

async function sendAll(data) {
  let results = [];
  for (let index = 0; index < data.length; index++) {
    const result = await axios.post('url', data[index].attributeValues);
    results.push(result);
  }
}

假模拟 api 示例。

// function* dataLake(data) {
//   for (let item of data) yield item;
// }
const getDataFake = data => {
  return new Promise(r => {
    setTimeout(() => {
      r(data);
    }, 100);
  });
};

async function sendAll(data) {
  let results = [];
  for (let index = 0; index < data.length; index++) {
    const result = await getDataFake(data[index].attributeValues);
    results.push(result);
  }
  return results;
}

const data = [
  {
    attributeName: "s1",
    attributeValues: ["a", "b"]
  },
  {
    attributeName: "s2",
    attributeValues: ["c", "d"]
  },
  {
    attributeName: "d1",
    attributeValues: ["p", "q"]
  },
  {
    attributeName: "d2",
    attributeValues: ["r", "s"]
  },
  {
    attributeName: "",
    attributeValues: [""]
  },
  {
    attributeName: "d2",
    attributeValues: ["r", "s"]
  }
];
sendAll(data).then(console.log)

【讨论】：