How to collect data from a list and export it as raw text

Question

I'm stuck putting things together by JavaScript/jQuery.

Here is my HTML:

<ul id="container">
  <li><span class="spName">insalata mista</span>
    <p class="spPr"><span class="zPr">6,90</span> €</p>
    <p class="spPrExtra"><span class="spName">+Parmesan</span> <span class="zPr">1,50</span></p>
    <p class="spPrExtra"><span class="spName">+Mozzarella</span> <span class="zPr">2,00</span></p>
  </li>
  <li><span class="spName">spaghetti al sugo</span>
    <p class="spPr"><span class="zPr">8,20</span></p>
    <p class="spPrExtra"><span class="spName">+Champignons</span> <span class="zPr">1,00</span> €<br></p>
  </li>
</ul>

I need an output of raw text, collecting the parts out of the list with a result like that:

insalata mista 6,90
+Parmesan 1,50
+Mozzarella 2,00
spaghetti al sugo 8,20
+Champignons 1,00

Any help welcome!

Show us what you tried and where you are getting stuck. SO isn't a free code writing service. The objective here is for others to help you fix your own code attempts, not do all the work for you. You can edit the question any time to add your updates and clarifictions — charlietfl, Jul 01 '20 at 01:58
I started with: var listItems = $('#container li') But when it goes to two extras in one order, i am at the end of my knowlege — utzlbua, Jul 01 '20 at 02:04
I went on with discribing the names and prices like: var ctName = listItems.children(".spName"); var ctPreis = listItems.children(".ctPreis"); … And i think i should use something like: listItems.each(function(index, elem) {} – My problem are the jquery-array like objects. — utzlbua, Jul 01 '20 at 02:15
@utzlbua See the solution below and some explanation for you. Do not forget to upvote and accept as "the" answer. Cheers. — Always Helping, Jul 01 '20 at 02:28

Always Helping · Accepted Answer · 2020-07-01T02:30:53.790

0

This is what you have to do to get the text of each .spName and .zPr using a jQuery .each function in li first and then from there .each all the p to get the desired text and data via their .children and class-names

Read more about .each jQuery function here

Read more about .children jQuery function here

I have also changed your HTML a little bit as it was correctly added and to each elements and span.

Run snippet below to see it working.

$('li').each(function() {
  $(this).children('p').each(function() {
    $('#plain_text').append($(this).children('.spName').text() + ' ' + $(this).children('.zPr').text()+'<br>')
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="container">
  <li>
    <p>
      <span class="spName">insalata mista</span><span class="zPr">6,90 €</span> €</p>
    <p><span class="spName">+Parmesan</span> <span class="zPr">1,50</span></p>
    <p class="spPrExtra"><span class="spName">+Mozzarella</span> <span class="zPr">2,00</span></p>
  </li>
  <li>
    <p><span class="spName">spaghetti al sugo</span><span class="zPr">8,20</span></p>
    <p class="spPrExtra"><span class="spName">+Champignons</span> <span class="zPr">1,00</span> €<br></p>
  </li>
</ul>


<div id="plain_text"></div>

edited Jul 01 '20 at 02:30

answered Jul 01 '20 at 02:25

Always Helping

14,316
4
13
29

Hey AlwaysHelping, i just got up and was very happy to find your answer here in germany. It looks great! Just wondering, why you have the two „€“ at the first line. But i think i can handle that. Give me one afternoon to check your answer out… – utzlbua Jul 01 '20 at 09:10
Incredible, how short your answer is! I was thinking much to complicated… Once again, i thank you very much for your invested time. I accepted your answer as the solution. It steered my view of things in the right direction. – utzlbua Jul 01 '20 at 09:31
@utzlbua I am glad that I was able to help you out. That’s must be just a typo. You can just remove that one and you should be just fine. Don’t forget to upvote the answer by Clicking the Grey up arrow sign. Cheers. – Always Helping Jul 01 '20 at 09:32
I accepted your answer with the green arrow. Sorry, but the system doesn't allow me to upvote yet, as i am a new member with less than 15 reputations… It says that my upvote is recorded, but not shown here. Thank you once again. – utzlbua Jul 01 '20 at 09:42

utzlbua · Answer 2 · 2020-07-01T11:55:48.300

AlwaysHelping gave the right answer! Just to help others with similar problems, i took his answer and edited just a little typo. Thank You stackoverflow and AlwaysHelping – you helped me very quickly after two days of unsuccessful attempts on my part!

  $('li').each(function() {
    $(this).children('p').each(function() {
      $('#plain_text').append($(this).children('.spName').text() + ' ' + $(this).children('.zPr').text()+'<br>')
    })
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<ul id="container">
  <li>
    <p>
      <span class="spName">insalata mista</span> <span class="zPr">6,90</span>
    </p>
    <p class="spPrExtra">
      <span class="spName">+Parmesan</span> <span class="zPr">1,50</span>
    </p>
    <p class="spPrExtra">
      <span class="spName">+Mozzarella</span> <span class="zPr">2,00</span>
    </p>
  </li>
  <li>
    <p>
      <span class="spName">spaghetti al sugo</span> <span class="zPr">8,20</span>
    </p>
    <p class="spPrExtra">
      <span class="spName">+Champignons</span> <span class="zPr">1,00</span>
    </p>
  </li>
</ul>

<div id="plain_text"></div>

How to collect data from a list and export it as raw text

2 Answers2