javascript 在html对象上循环并获取单个对象数组

bd1hkmkf 于 2023-03-16 发布在 Java

关注(0)|答案(5)|浏览(170)

我有一些html对象，如：

<input id="myfield1" class="fields_to_iterate">
<input id="myfield2" class="fields_to_iterate">
<input id="myfield3" class="fields_to_iterate">
<input id="myfield4" class="fields_to_iterate">
<input id="myfield5" class="fields_to_iterate">

如果我用javascript写的话

$('.fields_to_iterate').each( (index, element) => { 
    myObject.push( { [$(element).attr('id')] : $(element).val() } ); 
});

在console.log调试中，得到如下对象：

transferBook: Array(7)
0 : {myfield1: 'value1'}
1 : {myfield2: 'value2'}
2 : {myfield3: 'value3'}
3 : {myfield4: 'value4'}
4 : {myfield5: 'value5'}
length: 5
[[Prototype]] : Array(0)

但我只想得到一个数组

transferBook: Array(1)
0 : {myfield1: 'value1', myfield2: 'value2', myfield3: 'value3', myfield4: 'value4', myfield5: 'value5'}
length: 1
[[Prototype]] : Array(0)

我如何修改我的.each（）来推入单个数组？谢谢大家！干杯！

JavaScript

来源：https://stackoverflow.com/questions/75752459/loop-on-html-objects-and-obtain-a-single-array-of-objects

5条答案

按热度按时间

lvjbypge1#

谁需要jQuery？

const myObject = Object.fromEntries(
  Array.from(
    document.querySelectorAll(".fields_to_iterate"),
    ({ id, value }) => [id, value]
  )
);

console.log(myObject);

<input id="myfield1" class="fields_to_iterate" value="one">
<input id="myfield2" class="fields_to_iterate" value="two">
<input id="myfield3" class="fields_to_iterate" value="three">
<input id="myfield4" class="fields_to_iterate" value="four">
<input id="myfield5" class="fields_to_iterate" value="five">

见

如果您真的想将其放入数组中，只需将其括在方括号中即可

const myObject = [Object.fromEntries(...)];

赞(0）回复(0）举报 2023-03-16

kzmpq1sx2#

您可以修改.each（）方法以创建单个对象并将其推入myObject数组。

let myObject = [];
let fields = {};

$('.fields_to_iterate').each((index, element) => {
  fields[$(element).attr('id')] = $(element).val();
});

myObject.push(fields);

console.log(myObject);

赞(0）回复(0）举报 2023-03-16

qni6mghb3#

使用reduce代替each，如下所示完整代码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<input id="myfield1" value="x1" class="fields_to_iterate">
<input id="myfield2" value="x4" class="fields_to_iterate">
<input id="myfield3" class="fields_to_iterate">
<input id="myfield4" class="fields_to_iterate">
<input id="myfield5" class="fields_to_iterate">
<script>
    const myObject = $('.fields_to_iterate').get().reduce((acc, el) => {
        const obj = {};
        obj[$(el).attr('id')] = $(el).val();
        return { ...acc, ...obj };
    }, []);
    console.log(myObject);
</script>
</body>
</html>

赞(0）回复(0）举报 2023-03-16

rqcrx0a64#

您可以使用jQuery的map，Object.fromEntries从键值对数组创建对象。

let res = [Object.fromEntries($('.fields_to_iterate').map((i, el) => [[el.id, el.value]]).get())];
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myfield1" class="fields_to_iterate" value="value1">
<input id="myfield2" class="fields_to_iterate" value="value2">
<input id="myfield3" class="fields_to_iterate" value="value3">
<input id="myfield4" class="fields_to_iterate" value="value4">
<input id="myfield5" class="fields_to_iterate" value="value5">

赞(0）回复(0）举报 2023-03-16

ia2d9nvy5#

看起来您需要为每个输入的id和value创建一个键值对object。

const myObject = {}

$('.fields_to_iterate').each((index, element) => {
  const id = $(element).attr('id')
  const val = $(element).val()
  myObject[id] = val
});

console.log(myObject)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myfield1" class="fields_to_iterate" value="value1">
<input id="myfield2" class="fields_to_iterate" value="value2">
<input id="myfield3" class="fields_to_iterate" value="value3">
<input id="myfield4" class="fields_to_iterate" value="value4">
<input id="myfield5" class="fields_to_iterate" value="value5">

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 在html对象上循环并获取单个对象数组

5条答案

相关问题

热门标签

最新问答