How to create a json object dynamically using attributes of html elements

Question

I want to create a JSON object entirely from the attributes of HTML elements that share the same class so that the key is say the data attribute and value is the id.

I've tried the code below :

$("#searchBtn").click(function() {
  var map = [];
  $(".searchTextField").each(function() {
    var fieldName = $(this).attr('data-field-name')
    map.push({
      $(this).attr('data-field-name'): $(this).val()
    })
    alert(map);
  });
})

what I want to achieve is to have some like

{
  "id" : 1,
  "page" : 5
}

but id and page must be dynamic i.e the text id is taken from an tribute of an HTML element

I have created a working example of what I think you are after here: https://jsfiddle.net/ft67g42d/ — Levi Cole, Apr 12 '19 at 13:54

sdesapio · Accepted Answer · 2019-04-12T13:45:55.713

2

$("#searchBtn").click(function () {
    var map = [];

    $(".searchTextField").each(function() {
        var element = {}; 

        element.id = $(this).data('field-name');
        element.page = $(this).val();

        map.push(element);
    });

    alert(map);
});

edited Apr 12 '19 at 13:45

answered Apr 12 '19 at 13:40

sdesapio

138
1
9

thank you but what i want is instead of element.id can i have something like element.$(this).val() as the object – Tapiwa Takaindisa Apr 12 '19 at 14:06
@TapiwaTakaindisa Not sure what you mean. Can you give me an example of exactly what you want the resulting object to look like? – sdesapio Apr 12 '19 at 14:15

score 1 · Answer 2 · answered Apr 12 '19 at 13:49

1

var dd = {};
dd.test = 5;

or

var dd = {};
dd['test'] = 5;

answered Apr 12 '19 at 13:49

Юрий Светлов

1,622
2
23
27

How to create a json object dynamically using attributes of html elements

2 Answers2