CODEWITHSUNDEEP
javascriptjqueryhtmlspringdom
Alberto Crespo
Alberto Crespo

Reputation: 2519

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

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

Upvotes: 0

Views: 1134

Answers (1)

elzi
elzi

Reputation: 5672

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)

Upvotes: 1

Related Questions