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

Question

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?

In your example the script gets all the present elements but causes a Warning. I guess you have to add a check if the element has children of its own. — Mihail Minkov
– Mihail Minkov, Commented Dec 16, 2019 at 21:56

Barmar · Accepted Answer · 2019-12-16 21:57:14Z

1

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>

answered Dec 16, 2019 at 21:57

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

Mr. Jo Over a year ago

Thanks barmer for this working solution. Now I've got it. I was always wondering why it sometimes works with and without .get()

trincot · Accepted Answer · 2019-12-16 21:57:04Z

1

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()

answered Dec 16, 2019 at 21:57

trincot

357k38 gold badges282 silver badges338 bronze badges

Comments

Stefan Koenen · Accepted Answer · 2019-12-16 21:58:08Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related