CODEWITHSUNDEEP
javascriptjqueryhtml
Mr. Jo
Mr. Jo

Reputation: 5261

Create an array of objects from HTML don't works right

I've this structure here build from a previous question:

jQuery(document).ready(function($) {
  let entries = [jQuery("#row .entry")].map(data => ({
    issue: data.children[0].children[0].value,
    value: data.children[1].children[0].value
  }));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
  <div id="entry-wrapper">
    <div class="entry">
      <div class="text-wrapper">
        <input type="text" class="text" value="ABC">
      </div>
      <div class="value-wrapper">
        <input type="text" class="value" value="123">
      </div>
    </div>
    <div class="entry">
      <div class="text-wrapper">
        <input type="text" class="text" value="DEF">
      </div>
      <div class="value-wrapper">
        <input type="text" class="value" value="456">
      </div>
    </div>
  </div>
</div>

Because of CSS I needed to wrap everything into some divs and wrappers and now I'm unable to get every text and the associated value in my array of objects. What I'm doing wrong?

Upvotes: 0

Views: 44

Answers (3)

Stefan Koenen
Stefan Koenen

Reputation: 2337

You can use the Array.from method to convert the jQuery collection to a JavaScript array.

jQuery(document).ready(function($) {
  let entries = Array.from(jQuery("#row .entry")).map(data =>({
    issue: data.children[0].children[0].value,
    value: data.children[1].children[0].value
  })).forEach(el => {
    console.log(el);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
  <div id="entry-wrapper">
    <div class="entry">
      <div class="text-wrapper">
        <input type="text" class="text" value="ABC">
      </div>
      <div class="value-wrapper">
        <input type="text" class="value" value="123">
      </div>
    </div>
    <div class="entry">
      <div class="text-wrapper">
        <input type="text" class="text" value="DEF">
      </div>
      <div class="value-wrapper">
        <input type="text" class="value" value="456">
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Barmar
Barmar

Reputation: 780861

You shouldn't wrap the jQuery object inside an array. That's setting data to the jQuery collection, not the elements.

jQuery has its own map() method, which you can use to loop over the elements in a collection (note that it takes arguments in the opposite order of Array.prototype.map()). It returns a jQuery object, but you can call .get() to convert that to an ordinary array.

jQuery(document).ready(function($) {
  let entries = $("#row .entry").map((i, data) => ({
    issue: data.children[0].children[0].value,
    value: data.children[1].children[0].value
  })).get();
  console.log(entries);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
  <div id="entry-wrapper">
    <div class="entry">
      <div class="text-wrapper">
        <input type="text" class="text" value="ABC">
      </div>
      <div class="value-wrapper">
        <input type="text" class="value" value="123">
      </div>
    </div>
    <div class="entry">
      <div class="text-wrapper">
        <input type="text" class="text" value="DEF">
      </div>
      <div class="value-wrapper">
        <input type="text" class="value" value="456">
      </div>
    </div>
  </div>
</div>

Upvotes: 1

trincot
trincot

Reputation: 350147

To turn a jQuery collection into a standard Array, you should not do:

[jQuery("#row .entry")]

...as this creates an array with just one value, and that value is the jQuery collection.

Instead use the method that jQuery provides for this purpose, i.e. get():

Without a parameter, .get() returns an array of all of the elements

So:

jQuery("#row .entry").get()

Upvotes: 1

Related Questions