Write arrays content in my page using javascript

Question

I'm studying javascript for the first time and I've some doubt: I have two arrays; the first one contain the image of a person, the second one his personal informations (the arrays' length is the same because they contain the same number of people). I'd like to write the content in my page so print the image and the infos of the first user, then the image and the infos of the second and so on...

How can I do it?

this is the code:

function jsonCard() 
{
var richiestaCard = new XMLHttpRequest();

richiestaCard.onreadystatechange = function()
{
    if(richiestaCard.readyState == 4) 
{
        var objectcardjson = {};
        window.arrayCard= []; //creazione dell'array che conterrà le cards
        objectcardjson = JSON.parse(richiestaCard.responseText);

        arrayCard = objectcardjson.cards; //the first array
    }
}
richiestaCard.open("GET", "longanocard.json", true);
richiestaCard.send(null);
}

function jsonEntity()
{
 var richiestaEntity = new XMLHttpRequest();

richiestaEntity.onreadystatechange = function()
{
    if(richiestaEntity.readyState == 4) 
{
        var objectentityjson = {};
        window.arrayEntity= []; //creazione dell'array che conterrà le entity
        objectentityjson = JSON.parse(richiestaEntity.responseText);

        arrayEntity = objectentityjson.cards; //the second array
    }
}
richiestaEntity.open("GET", "longano.json", true);
richiestaEntity.send(null);
}


function displayArrayCards()
{
jsonCard();
jsonEntity();  
var inizioTag = "<img src=";
var fineTag = "\>";

  for(i = 0; i < arrayCard.length; i++) 
 {
        ...
 }
}

I'd like to have the image and then the infos (for the first user), the image and the infos for the second and so on all included in a div.

Any particular reason you are using div when this sounds exactly like what tables are for? — josh.trow
– josh.trow, Commented Jun 25, 2012 at 15:28

J Max · Accepted Answer · 2012-06-25 15:06:37Z

1

Try something along the lines of

 function displayArrayCards()
{
   jsonCard();
   jsonEntity();  

   var wrapper = document.getElementById('div you want to put all of these users into');
   for(i = 0; i < arrayCard.length; i++) 
   {
        var userDiv = document.createElement('div');

        var cardImg = document.createElement('img');
        img.src = arrayCard[i];
        /** Set other attributes for img **/

        var entityDiv = document.createElement('div');
        entityImg.innerHTML = arrayEntity[i];
        /** Set other attributes for div **/

        userDiv.appendChild(cardImg);
        userDiv.appendChild(entityDiv);

        wrapper.appendChild(userDiv);
   }
}

Honestly there are a lot of ways to do this. Above is simply what I would do.

answered Jun 25, 2012 at 15:06

J Max

2,3712 gold badges25 silver badges43 bronze badges

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

1 Comment

user1453638 Over a year ago

var cardImg = document.createElement('img'); cardImg.src = arrayCard[i]; I tried but it doesn't work in plus when I click the button again it doesn't clear the previous content. How can I fix it?

Collectives™ on Stack Overflow

Write arrays content in my page using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related