How to print data using javascript/jquery

Question

I have the next js code.

var myData=[];
for(j=1;j<=Pages;j++)
{
$.ajax({
        type: 'get',
        url: 'link.xml'+j,
        async: false, 
        dataType: 'xml', 
        success: function(data){
            getData(data);
        }, 
        error: function(data){
            console.log("error");
        }
    });
}
function getData(data){


     var tmpData = {id:'' , displayName:''};  

     //taking the values and storing them to myData


            myData.push(tmpData); 
            tmpData = {id:'' , displayName:'', eventsHref: []};


}


    for(i=0;i<myData.length;i++)
    {
     $.ajax({
        type: 'get',
        url: 'somelink'+data[i].id,
        async: false, 
        dataType: 'xml', 
        success: function(events){
            getUpEvents(events);
        }, 
        error: function(events){
            console.log("error");
        }
    });
    }
    function getUpEvents(events){

    var tmpEvents = {displayNameEvent:[] , displayNameArtist: []};

     //taking some other values and storing them to myData

     myData.push(tmpEvents); 
     tmpEvents = {displayNameEvent:[] , displayNameArtist:[]};

}

Now to print the results from myData with a specific way.In the first line myData[0].displayName.Next lines all the myData[i].displayNameEvents that indicates to the myData[0].displayName and all the myData[i].displayNameArtist.After that it will print the next myData[1].displayName and so goes on.

Below is how i tried to print them.

for(i=0;i<myData.length;i++)
{
        document.write(myData[i].displayName+"<br>");
        document.write(myData[i].displayNameEvent+"<br>");
        document.write(myData[i].displayNameArtist+"<br>");
}

Don't use `document.write` -- http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Halcyon, Nov 26 '13 at 17:37

Gopherkhan · Answer 1 · 2013-11-26T18:09:10.737

2

If this is just for debugging, use JSON.stringify(myData) to parse your data into a JSON string. This way you'll have both the property name and value right next to eachother.

Then use console.log or div.innerText to write the text out.

For example, assuming you have a div with the class 'output':

$('.output').text(JSON.stringify(myData));

You can also open your debugger console and view the console output with:

console.log(JSON.stringify(myData));

edited Nov 26 '13 at 18:09

answered Nov 26 '13 at 17:53

Gopherkhan

4,317
4
32
54

I get nothing as result. – user3014089 Nov 26 '13 at 18:09
Are you sure you're getting data back? Try dropping in a 'debugger;' at the very top of getData(data). Then look at what data you are receiving. – Gopherkhan Nov 26 '13 at 18:52

score 0 · Accepted Answer · answered Nov 26 '13 at 17:40

0

//Create a div to hold the results
var results = $("<div/>");

//Loop through the data and append each value wrapped in a p to the div
for(i=0;i<myData.length;i++)
{
        results.append("<p>" + myData[i].displayName + "</p>");
        results.append("<p>" + myData[i].displayNameEvent + "</p>");
        results.append("<p>" + myData[i].displayNameArtist + "</p>");
}

//append the div to the body
$("body").append(results);

answered Nov 26 '13 at 17:40

Kevin Bowersox

93,289
19
159
189

These are the results now : Muse Dangerous Muse undefined undefined I think that something wrong with the for loops on ajax requests. – user3014089 Nov 26 '13 at 17:50
@user3014089 Are you using FF? If so can you console.log the ajax response? It will be difficult to help on this without the data. – Kevin Bowersox Nov 26 '13 at 17:51
What's the ff?I am new to javascript – user3014089 Nov 26 '13 at 17:54
Omg sorry if you mean firefox then yes. – user3014089 Nov 26 '13 at 18:00
@user3014089 Are you familiar with adding extensions to firefox? I would recommend adding the firebug extension. – Kevin Bowersox Nov 26 '13 at 18:01
I've added the firebug extension.It didn't seemed that this was the problem. When i try to print them seperetely,each inside it's own function the results are printed perfeclty. – user3014089 Nov 26 '13 at 18:15
1

You going to console for see error or print from console.log() – Mirko Cianfarani Nov 26 '13 at 18:43

score 0 · Answer 3 · answered Nov 26 '13 at 19:21

In the myData array above, two elements are being pushed for each object.

one object, which has id and displayName properties
second object with displayNameEvent and displayNameArtist array

As there is no relation between these two array elements, we cannot print the data corrrectly, displayName with its associated diasplayNameEvents and displayNameArtists.

I have rewritten the above code with some dummy data in JsFiddle. The code associates the id / displayName with displayNameEvent / displayNameArtist arrays and prints the data correctly as shown below.

101s name

101s event1, 101s event2

101s artist1, 101s artist2


102s name

102s event1, 102s event2

102s artist1, 102s artist2


103s name

103s event1, 103s event2

103s artist1, 103s artist2

...

How to print data using javascript/jquery

3 Answers3