使用ES6lodash從API映射物件鍵-有解無憂

我正在使用 Vue 3 將 POST 資料發送到我的 API。物件看起來像

const externalResults: ref(null)

const resource = ref({
  id: null,
  name: null,
  state: {}
})

在將資料發送到 API 之前，我正在決議resource物件以避免發送與state屬性相關的嵌套物件。所以發送的有效載荷看起來像

{
  id: 1,
  name: 'Lorem ipsum',
  state_id: 14
}

如果資料丟失/錯誤，API 會回傳 422

{
  "message":"Some fields are wrong.",
  "details":{
    "state_id":[
       "The state_id field is mandatory."
    ]
  }
}

那么問題來了：如何重命名物件鍵以便始終從鍵中洗掉字串_id？

由于我使用的是 vuelidate，我必須將回傳的錯誤詳細資訊“映射”到模型屬性名稱。現在我這樣做是為了在請求完成后獲取詳細資訊

externalResults.value = e.response.data.details

但可能我需要類似的東西

externalResults.value = e.response.data.details.map(item => { // Something here... })

我想要一個 1 行解決方案，無論它使用 ES6 還是 lodash。請注意，這state_id只是一個示例，_id我需要洗掉許多以結尾的屬性。

預期的結果是

externalResults: {
  "state":[
       "The state_id field is mandatory."
  ]
}

uj5u.com熱心網友回復：

我不知道你允許你的單行多長時間，但這是我在 ECMAScript 中提出的，使用Object.entries()和Object.fromEntries()拆卸和重新組裝物件：

const data = {
  id: 1,
  name: 'Lorem ipsum',
  state_id: 14
};

const fn = (x) => Object.fromEntries(Object.entries(x).map(([k, v]) => [k.endsWith('_id') ? k.slice(0, -3) : k, v]));

console.log(fn(data));

您可以使用正則運算式將其縮短一點replace()：

const data = {
  id: 1,
  name: 'Lorem ipsum',
  state_id: 14
};

const fn = (x) => Object.fromEntries(Object.entries(x).map(([k, v]) => [k.replace(/_id$/, ''), v]));

console.log(fn(data));

如果你使用 lodash，你可以通過使用以下mapKeys()函式來縮短：

const data = {
  id: 1,
  name: 'Lorem ipsum',
  state_id: 14
};

const fn = (x) => _.mapKeys(x, (v, k) => k.replace(/_id$/, ''));

console.log(fn(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/496486.html

標籤：Vue.js 字典 ecmascript-6 罗达什

上一篇：如何訪問python函式中存在的特定字典值

下一篇：firebase函式部署有錯誤