Dynamic JSON creation using jQuery

Question

I am new to JSON and tried the below example to see the results but it returns an empty array in the console. Any suggestions?

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>

Change $("input[class=email]") into $('input[class="email"]'). You need to add quotes for attributes values in a selector. And since it's a class, you can use $('input.email'). — Gil
– Gil, Commented Oct 13, 2021 at 17:55
@Gil not quite accurate. The quotes around attribute values in a selector are only required if the value contains a space. In this case [class="email"] and [class=email] will both work - although .email would be far more performant and better practice. — Rory McCrossan
– Rory McCrossan, Commented Oct 13, 2021 at 18:16
changed but still getting this output in console [] , its empty — skkh
– skkh, Commented Oct 13, 2021 at 18:24

Rory McCrossan · Accepted Answer · 2021-10-13 18:20:31Z

1

The issue with your code is because you're mixing plain JS and jQuery methods. For example, you shouldn't iterate through a jQuery object with a for loop, and a jQuery object doesn't have a getAttribute() method. You would use each() and attr() or prop() in those cases, respectively.

That said, you can more simply create an array from a jQuery object containing a collection of elements using map(), something like this:

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="[email protected]" />
<input type="email" class="email" title="email_2" value="[email protected]" />

answered Oct 13, 2021 at 18:20

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

skkh Over a year ago

Rory McCrossan Over a year ago

That's a much more complex nested structure than your question states. I would suggest you start a new question about that, making sure to include all the relevant HTML along with an accurate example of the output you want to create.

skkh Over a year ago

Thank you very much, i found a way to get complete string , i just add that fix prefix to json output using php string append function and it worked , anyway its not a a very effienct way to do, but it solved the problem for now.

Collectives™ on Stack Overflow

Dynamic JSON creation using jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related