How can I obtain an array list from DOM into javascript?

Question

I don't know how obtain an Objects arrayList that is coming from the Spring Controller.

This is my Controller which is returning an Array List of objects.

Controller

@RequestMapping(value = "hello", method = RequestMethod.GET) public ModelAndView showMessage(Principal p,HttpServletResponse response) { ModelAndView mv = new ModelAndView("mapa"); response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); mv.addObject("postossaude", Lists.newArrayList(PostosSaude.findAll())); return mv; }

This is the Postosaude.java Object wchich has all the info I need to rescue.

@Entity
public class Postosaude {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private long id;
private String nome_posto_saude;
private double latitude;
private double longitude;
private String endereco;

public Postosaude()
{}
//gets and sets...
}

`

This is my mapa.html which is receiving the List ( I use Thymeleaf to obtain the list).

mapa.html

  <!DOCTYPE html>
    <html>
      <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
       var NodeListPostosSaude = document.getElementsByName('postossaude'); // ?? I want to obtain the "postossaude" list
            alert(NodeListPostosSaude.length);
        </script>
      </head>
      <body>
        <p th:text="${#vars.get('postossaude')}"> </p> //I check that the list is arriving OK (it prints the three objects that are in my list:
                                                      //"[palmaslab.mapas.repository.Postosaude@e7228c7a, palmaslab.mapas.repository.Postosaude@478808dc, palmaslab.mapas.repository.Postosaude@f35bea7d]"
       </body>
    </html>

So, I want to obtain this List into my script but i dont know how to do it. Do you know any javascript method or jQuery method to obtain that?

My objective is, using this array Objects list (inside of it are different object with geo cordinates) to make a googlemaps customized like that

What is it you want exactly? The inner HTML that is rendered into the <p> tags? — elzi
– elzi, Commented Nov 7, 2014 at 19:35
I want obtain this list as array list and then add this data to make a googlemaps marker like: $.each(NodeListPostosSaude ,function(index, value){ var marker = new google.maps.Marker({ position: new google.maps.LatLng(value.latitude, value.longitude), title:value.nome_posto_saude, }); markers.push(marker); latlngbounds.extend(marker.position); }); — Alberto Crespo
– Alberto Crespo, Commented Nov 7, 2014 at 19:40
What data? Can you paste the final rendered HTML in your answer? As I asked original, is the data the html value that will be rendered inside the <p> tag? — elzi
– elzi, Commented Nov 7, 2014 at 19:41

elzi · Accepted Answer · 2014-11-10 22:43:38Z

1

As per the discussion in the comments, here's my solution - JSBin

HTML

<div id="container">
  <!-- P tags generated -->
  <p>Data Value 1</p>
  <p>Data Value 2</p>
  <p>Data Value 3</p>
  <p>Data Value 4</p>
</div>

JS

var container = document.getElementById('container');
var p = container.getElementsByTagName('p');

var array = [];

for (i = 0; i < p.length; i++) {
    array.push(p[i].innerHTML)
}

console.log(array)

answered Nov 10, 2014 at 22:43

elzi

5,6927 gold badges39 silver badges62 bronze badges

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

4 Comments

Alberto Crespo Over a year ago

This is more or less what I need but i am trying to rescue an Array Objects List, I think this code would be useful if i have just one object. I found this site in which seems to be a solution but i cannot catch the ${list}; from

<script> 	$(document).ready(function() {   		var list = ${list}; 		$.each(list, function( index, value ) { 			alert( index + ": " + value ); 		});   	}); </script>

elzi Over a year ago

I'm having a hard time understanding your English. What do you mean 'rescue' ? And do you want an Array or an Object? My example gets all innerHTML from a given group of elements, and puts that innerHTML as values of an array. From there you should be able to do whatever you need...

Alberto Crespo Over a year ago

your answer is perfect! that works! exists any kind of element which allows to tags elements (like <p> does) but doesn't print the value in the page? thanks

Alberto Crespo Over a year ago

I found a style which does that:

<div class="container" style="display:none;"> 			  <!-- P tags generated --> 			  <p th:text="${postosaude.nome_posto_saude}"></p> 			  <p th:text="${postosaude.latitude}"></p> 			  <p th:text="${postosaude.longitude}"></p> 	    </div>

Collectives™ on Stack Overflow

How can I obtain an array list from DOM into javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related