jQuery serialize and return JSON string

Question

I'm trying to serialize sortable list using data-id attribute instead of just id.

This is my code:

var obj = $('.sortable li').map(function() {
    return 'id=' + $(this).data("id");
}).get();

JSON.stringify(obj)

which returns:

["id=1", "id=2", "id=3"]

what I need is to return:

[{"id":1},{"id":2},{"id":3}]

Here is the html part:

<ul class="sortable">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
  <li data-id="4">Item 4</li>
  <li data-id="5">Item 5</li>
</ul>

guradio · Accepted Answer · 2016-03-11 04:10:12Z

3

var id = [];
$('.sortable li').each(function() {
  id.push({
    id: $(this).data('id')
  });
})

console.log(JSON.stringify(id))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="sortable">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
  <li data-id="4">Item 4</li>
  <li data-id="5">Item 5</li>
</ul>

Check this using .each() and .push()

answered Mar 11, 2016 at 4:10

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sachq · Accepted Answer · 2016-03-11 05:24:05Z

2

You can achieve this by using map method itself.

var obj = $('.sortable li').map(function() {
 return {
   id: $(this).data("id")
 };
}).get();

JSON.stringify(obj);

answered Mar 11, 2016 at 5:24

sachq

6727 silver badges12 bronze badges

1 Comment

Alko Over a year ago

Thanks I prefer map method instead of each.

Collectives™ on Stack Overflow

jQuery serialize and return JSON string

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related