如何使用Javascript將陣列包含物件推送到帶有鍵的物件？

我創建了一個像這樣的物件：

var obj = {
    name: $('#name').val(),
    age:  $('age').val()
};

我有一個這樣的陣列物件

var arrObj = [
    {level: 10, status: 1},
    {level: 8, status: 0}
];

我想將我的陣列推送到具有已定義鍵和預期結果的物件：

{
    name: 'Name A',
    age:  30,
    level: [
        {level: 10, status: 1},
        {level: 8, status: 0}
    ]
}

但我不知道如何用鍵將我的陣列推送到物件。我試過了：

var obj = {
    name: $('#name').val(),
    age:  $('age').val(),
    level: []
};

obj['level'].push(arrObj);

但我會讓我的級別元素有 1 個陣列級別，如下所示：

{
    name: 'Name A',
    age:  30,
    level:[ 
        [
            {level: 10, status: 1},
            {level: 8, status: 0}
        ]
    ]
}

我怎樣才能得到我期望的結果。

非常感謝！

uj5u.com熱心網友回復：

=可以使用（賦值運算子）將陣列直接分配給物件

您可以嘗試按照以下方式將物件陣列分配給級別鍵。

var obj = {
    name: 'Name A',
    age:  30,
    level: []
};
var arrObj = [
    {level: 10, status: 1},
    {level: 8, status: 0}
];

obj.level = arrObj //arrObj's value will be overwritten to level key and if such key doesn't exist then it'll be created!

console.log(obj)

uj5u.com熱心網友回復：

您可以嘗試使用擴展運算子

obj['level'].push(...arrObj);

uj5u.com熱心網友回復：

你可以這樣做

obj.level = arrObj;

level如果此類屬性obj不存在，則將動態創建其中的屬性。

uj5u.com熱心網友回復：

您可以使用concat代替push：

var obj = {
    name: 'Name A',
    age:  30,
    level: []
};
var arrObj = [
    {level: 10, status: 1},
    {level: 8, status: 0}
];

obj.level = obj.level.concat(arrObj);

console.log(obj)

uj5u.com熱心網友回復：

制作了一個<form>對應于 OP 上資料結構的鍵和值的。它根據 OP 中的示例設定了預定義的值，只需單擊Done按鈕。

這部分提交處理程式從表單中提取資料并創建所需的資料結構：

const profile = {
    name: $('#name').val(),
    age:  $('#age').val()
  };
  let LVL = [];
  $('.level').each(function(i) {
    const level =  $(this).val();
    const status =  $(this).next('.status').val() || 0;
    LVL.push({
      level: level,
      status: status
    });
  });

let result;
$('#profile').on('submit', process);
$('#add').on('click', addLevel);

function process(e) {
  e.preventDefault();
  const profile = {
    name: $('#name').val(),
    age:  $('#age').val()
  };
  let LVL = [];
  $('.level').each(function(i) {
    const level =  $(this).val();
    const status =  $(this).next('.status').val() || 0;
    LVL.push({
      level: level,
      status: status
    });
  });
  profile.level = LVL; //It's a simple assignment
  console.log(profile);
  result = profile;
}
/* 
User can extra levels - regardless of the data entered in <form>
The data structure should always keep the same pattern.
 */
function addLevel(e) {
  $('.levels').append(`<input name='level' class='level' type='number' min='1' max='20'>
    <input name='status' class='status' type='checkbox' value='1'><br>`);
}

form,
fieldset {
  width: max-content;
}

button {
  float: right
}

<form id='profile'>
  <fieldset>
    <legend>Profile</legend>
    <input id='name' value='Name A'><br>
    <input id='age' type='number' min='18' value='30'>
  </fieldset>
  <fieldset class='levels'>
    <legend><button id='add' type='button'>Add Level</button></legend>
    <input name='level' class='level' type='number' min='1' max='20' value='10'>
    <input name='status' class='status' type='checkbox' value='1' checked><br>

    <input name='level' class='level' type='number' min='1' max='20' value='8'>
    <input name='status' class='status' type='checkbox' value='1'><br>
  </fieldset>
  <button>Done</button>
</form>

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

標籤：javascript jQuery

上一篇：在prestashop中向產品添加多個影像

下一篇：ReactJS：可點擊文本-如何禁用文本區域外的點擊？