list of elements from javascript to html

Question

I have a Javascript array of unknown length and I'd love to make some of its fields show up in my html page. I've tried to make a function in my js library to print them calling it directly through my html code

<body onload="parser()">
   <div id="list">
       <script> load_list() </script>
   </div>
</body>

the function parser() extract the infos from an xml file and put them in the array. The function load_list is the following

function load_list () {
     document.write ("<ul>");
     for (i=0; i< array.length; i++) {
         document.write ("<li><a href='javascript:change("+array[i].x+")'>");
         document.write (array[i].name);
         document.write ("</a></li>");
     }
}

do you have an element in which the new elements has to be added — Arun P Johny, Apr 19 '13 at 08:23
make the function load_list work. At the moment this doesn't show anything. I don't know if the problem is in the html code or in the javascript! — Janinho67, Apr 19 '13 at 08:25
you are looping through subjects object (whatever that is) and then you print array[] element? — Bojan Kovacevic, Apr 19 '13 at 08:25
I'd say, try not to depend on document.write, the problem is so much easier if you think of a container that needs to be filled with some elements. — Frederik.L, Apr 19 '13 at 08:26
bunch of question to ask here. 1. what is subjects and where is it defined? 2. where is array defined? ... — Bojan Kovacevic, Apr 19 '13 at 08:27
@BojanKovacevic just a mistake on copyin that. this is not the problem. array is defined as global in the js library — Janinho67, Apr 19 '13 at 08:29
@Frederik I think that what you've just said it's possible knowing the number of elements, but I can't — Janinho67, Apr 19 '13 at 08:29
well how do you expect us to help you and you did not put all relevant code? we can only say what is the problem with code we see here. — Bojan Kovacevic, Apr 19 '13 at 08:30
there is no other relevant code. is it so relevant to know where an array filled in a function and used in another one is declared? I guess there's only one place where this could be declared... — Janinho67, Apr 19 '13 at 08:35

Arun P Johny · Accepted Answer · 2013-04-19T08:37:17.210

3

Try

<div id="list">
</div>

<script>
    var subjects = [{
        x: '1',
        name: 'One'
    }]

    function load_list(){
        var ul = document.createElement('ul');
        document.getElementById('list').appendChild(ul);
        for (i=0; i< subjects.length; i++) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.innerHTML = subjects[i].name;
            a.setAttribute('href', "javascript:change("+subjects[i].x+")")
            li.appendChild(a);
            ul.appendChild(li);
        }
    }


    function parser(){

        //do parsing logic


        load_list()
    }

</script>

Demo: Fiddle

edited Apr 19 '13 at 08:37

answered Apr 19 '13 at 08:31

Arun P Johny

365,836
60
503
504

there is a typo in the anchor element definition, here and in the Fiddle :) – Frederik.L Apr 19 '13 at 08:35
@Arun P Johny createElement('li') should be createElement('a'); – MasNotsram Apr 19 '13 at 08:36
do i call the function inside the div? – Janinho67 Apr 19 '13 at 08:37
var a = document.createElement('li'); – Frederik.L Apr 19 '13 at 08:37
@Janinho67 No, you'd call this from the head, or in the body below the DIV, as it gets the element by ID, all it needs is for the DIV to have loaded. In the fiddle, it is being called in the head onload. – MasNotsram Apr 19 '13 at 08:38
@Janinho67 no need, you can call the `load_list()` on `window.onload` – Arun P Johny Apr 19 '13 at 08:39
@Janinho67 call the `load_list()` at the end of the `parser` method – Arun P Johny Apr 19 '13 at 08:41

score 2 · Answer 2 · edited May 23 '17 at 12:18

2

document.write is essentially deprecated (not officially).

Further reading: Why is document.write considered a "bad practice"?

Also, the creating of elements through straight text is again unwise, as it doesn't properly add them to the DOM.

Try this:

subjects = ["test","test2"];
array = [{x:"test",name:"name"},{x:"test2",name:"name2"}];

for (i=0; i< subjects.length; i++) {
    var li = document.createElement("li");
    var a = document.createElement("a");
    a.setAttribute("href","javascript:change("+array[i].x+")");
    a.innerHTML = array[i].name;
    li.appendChild(a);
    document.getElementById('listUL').appendChild(li);
}

<div id="list">
    <ul id="listUL">

    </ul>
</div>

See it working here:

http://jsfiddle.net/wdkmz/

edited May 23 '17 at 12:18

Community

1
1

answered Apr 19 '13 at 08:33

MasNotsram

2,047
14
27

it was useful SpAm thank you. I've already marked the other answer as "correct" but i give you a thumb up as well! – Janinho67 Apr 19 '13 at 08:47
Thankyou, much appreciated. The two answers are essentially the same anyway :) – MasNotsram Apr 19 '13 at 08:49

list of elements from javascript to html

2 Answers2