使用jQuery动态创建JSON

我是JSON的新手，尝试了下面的示例来查看结果，但它在控制台上返回一个空数组。有什么建议吗?

function createJSON() {
var obj = [];
var elems = $("input[class=email]");

for (i = 0; i < elems.length; i += 1) {
var id = this.getAttribute('title');
var email = this.value;
tmp = {
'title': id,
'email': email
};
obj.push(tmp);
}

var jsonString = JSON.stringify(obj);
console.log(jsonString);
}
createJSON();

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

代码的问题是因为您混合了纯JS和jQuery方法。例如，您不应该使用for循环迭代jQuery对象，并且jQuery对象没有getAttribute()方法。在这些情况下，您将分别使用each()和attr()或prop()。

也就是说，您可以更简单地使用map()从包含元素集合的jQuery对象中创建一个数组，如下所示:

function createJSON() {
let arr = $('.email').map((i, el) => ({
title: el.title,
email: el.value
})).get();
return JSON.stringify(arr);
}
let json = createJSON();
console.log(json);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="email" class="email" title="email_1" value="foo@foo.com" />
<input type="email" class="email" title="email_2" value="bar@bar.com" />

相关内容

最新更新

热门标签：