如何使用“project_name”更改JSON嵌套陣列屬性“project_id”

麻煩：

[
{
"project_id": 1,
"project_name": "CDP",
"role": "PL"
},
{
"project_id": 2,
"project_name": "Admincer",
"role": "PM"
},

我想使用某種方法將上述三個屬性中的“project_id”屬性添加到另一個陣列中。

我的想法是： 1.首先，如果我可以將這個陣列的“project_id”屬性復制到第二個嵌套JSON陣列中，就可以了。

我查找的內容：

const obj = {
"project_id": 1,
"project_name": "CDP",
"role": "PL"
};;
const objCopy = {
"start_time": "09:00:00",
"end_time": "18:00:00",
"rest_time": "01:00:00",
"worked_time": "08:00:00",
"is_wfh": true,
"id": 1, 1,
"work_day_id": 45,
"time_cards": [
{
... obj
}
]
};;
console.log (objCopy);

我發現我可以這樣復制它。我在 Chrome 控制臺中嘗試了上述代碼。復制了陣列，但復制了整個物件。我只想復制project_id的屬性。

我想在這個陣列中創建一個名為“prj_name”的新屬性，并在 Vuetify 中只顯示該屬性。

async fetchWorkerTimeCard() {
  try {
    this.worker_data = [] 
    await this.$axios.$get('/worker_time_card', {
      params: {
        work_date: this.calendarVal
      }
    }).then(data => {
      this.worker_data = data
    })
    var projects = await this.fetch_worker_projects()
    console.log(projects)
  } catch (error) {
    console.log(error)
    this.worker_data = []
  }
},

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.5/vue.js"></script>
<v-card>
  <v-data-table v-if="worker_data.time_cards" :headers="headers2" :items="worker_data.time_cards"></v-data-table>
</v-card>

uj5u.com熱心網友回復：

您可以像 JS 中的任何其他物件一樣簡單地更改物件資料。

const obj = {
  "project_id": 1,
  "project_name": "CDP",
  "role": "PL"
};

const objCopy = {
  "start_time": "09:00:00",
  "end_time": "18:00:00",
  "rest_time": "01:00:00",
  "worked_time": "08:00:00",
  "is_wfh": true,
  "id": 1,
  "work_day_id": 45
}

console.log({...obj, ...objCopy})

這將創建 1 個合并的物件。

或者，如果您只想 project_id 值，則只需將其更改為：

objCopy.project_id = obj.project_id

uj5u.com熱心網友回復：

如果我正確理解了您的第一個問題，您可能對map 函式感興趣，它允許您從現有陣列創建一個新陣列。因此，例如，如果您發布的第一個片段是我們呼叫的物件陣列projects，您可以使用： var projectIds = projects.map(p => p.project_id)，其中 projectIds 現在將是一個僅包含專案 ID 的陣列。

不過，您的問題似乎可能不止于此，因此我同意 Bravo 要求在您的問題中進行更多澄清/重組。

uj5u.com熱心網友回復：

我不太確定您是否想要以下任一結果：

{
"start_time": "09:00:00",
"end_time": "18:00:00",
"rest_time": "01:00:00",
"worked_time": "08:00:00",
"is_wfh": true,
"id": [
    1,
    1
],
"work_day_id": 45,
"time_cards": [
    {
        "project_id": 1
    },
    {
        "project_id": 2
    }
]

}

或這個

    {
    "start_time": "09:00:00",
    "end_time": "18:00:00",
    "rest_time": "01:00:00",
    "worked_time": "08:00:00",
    "is_wfh": true,
    "id": [
        1,
        1
    ],
    "work_day_id": 45,
    "time_cards": [
"project_id": [1, 2]
}

如果您需要第一種情況，以下代碼可能會對您有所幫助：

// This function return an array with: [{project_id: Number}]
function onlyIds(obj) {
  const ids = [];
  // Iterate the obj Array
  obj.forEach(element => {
    // Push a new JSON: "{project_id: 1}" or whatever
    ids.push({ project_id: element.project_id });
  });
  // return an array that only contains the project_id
  return ids;
}

const obj = [
  {
    project_id: 1,
    project_name: 'CDP',
    role: 'PL',
  },
  {
    project_id: 2,
    project_name: 'Admincer',
    role: 'PM',
  },
];
const objCopy = {
  start_time: '09:00:00',
  end_time: '18:00:00',
  rest_time: '01:00:00',
  worked_time: '08:00:00',
  is_wfh: true,
  id: [1, 1],
  work_day_id: 45,
  time_cards: onlyIds(obj),
};
console.log(onlyIds(obj));
console.log(objCopy);

我很確定應該有任何更優雅/最佳的方式（因為使用我現在可能缺少的任何型別的高階函式）但據我所知，這應該可以完成作業。

標籤：javascript json Vue.js Vuetify.js

上一篇：如何在KaliLinux上安裝Yarn？

下一篇：使用Typescript將Vue/JS元素ref分配給const