Printing an array to a new window using jquery

Question

I have a php page which contains a PHPlot image and I want to add a button that will print the data values to a new window (or the alert screen, tho not desirable due to array size (> 10k values)) but I am not quite sure how that would work.

I have considered window.open but that requires a URL so I don't see how that would work
I also thought about using either $.each to loop over the array and print the values but that doesn't put it on in the new window.

I have the following script chunk so far:

$('.XY').click(function() {
  var mz_array = <?php echo json_encode($mz_array) ?>;
  var int_array = <?php echo json_encode($int_array) ?>;
  for (var i = 0; i < mz_array.length; i++) {
    // This is obviously not what I want, it is just here to demonstrate the alert idea
    //alert(mz_array[i] - TAB - int_array[i]);
    // The below idea has my preference
    //window.open( /* printf(mz_array[i] + "\t" + int_array[i] + "\n" */ );
  }
});

I would love any suggestion on a smart way how to do this.

PS: The statements under 1 and 2 are based on my limited knowledge, I could very well be wrong.

if you want to print all results from mz_array with one alert, first concat loop results to one variable and then print that variable (print outside loop) — Bojan Kovacevic, Feb 18 '13 at 14:21
I want an output along the lines looking like "mz_array[i]{tab}int_array[i]". @Bojan What you suggest would give an alert with 1 line containing all the values (completely unreadable). — Bas Jansen, Feb 18 '13 at 14:23
i dont know how that arrays looks like, my solution is fine if array element is not big. Otherwise alert would look bad. — Bojan Kovacevic, Feb 18 '13 at 14:29
do this arrays have same size? Can you provide some examples of this two arrays? — Bojan Kovacevic, Feb 18 '13 at 14:32
The array contains well in excess of 10k values, hence I wanted to redirect it to a new window (tho the alert screen was an idea if new window wouldn't be possible for some reason). — Bas Jansen, Feb 18 '13 at 14:32
they both contain floats and are of equal size (one array contains X-coordinates and the other array contains Y-coordinates). Typical examle values would be like 140 (mz_array[0]) and 0 (int_array[0]). — Bas Jansen, Feb 18 '13 at 14:35
how about you put div element in page and fill it with javascript? You can still use concat to fetch all elements (if they have same size and if mz_array[i] is connected to int_array[i] then you can use my example. Then in the end use something like document.getElementById('id_div').innerHTML = result. alert is bad in case of that much elements (my opinion) — Bojan Kovacevic, Feb 18 '13 at 14:38
Putting a div on the same page is an option yes (and rather easy) but I would prefer being able to redirect it to a new window somehow (the alert was just an idea). — Bas Jansen, Feb 18 '13 at 14:39
you can use window.open without url ([link](http://www.w3schools.com/jsref/met_win_open.asp)). Use document.write to fill content for that new window. See Example2. — Bojan Kovacevic, Feb 18 '13 at 14:46
btw in concat dont use "\n",use "
" for new line, but i am sure you know that already. — Bojan Kovacevic, Feb 18 '13 at 14:50
I should, most likely would have written \n once out of habit from C however haha — Bas Jansen, Feb 18 '13 at 14:51

nbrooks · Accepted Answer · 2013-02-18T14:57:58.527

1

Alternative Solution (Doesn't require arrays be the same size)

$(function() {
    $('.XY').click(function() {
        var mz_array = <?php echo json_encode($mz_array) ?>;
        var int_array = <?php echo json_encode($int_array) ?>;

        var output = mz_array.map( function(val, idx) {
            return (val + "\t" + (int_array[idx] || "") );
        });

        var disp = window.open('','','width=400,height=150');
        $(disp.document.body).text( output.join("\t") );
    });
});

Basically, this merges the results into one array, then alerts the result. This kind of data processing should probably be done on the back-end in your PHP, however, and it might be more useful to return an object with a more useful structure, like:

[{ mz: 'abc', int: 1 }, { mz: 'def', int: 2 }, { mz: 'ghi', int: 13 }, ...]

Assuming both arrays have the same length:

$(function() {
    $('.XY').click(function() {
        var mz_array = <?php echo json_encode($mz_array) ?>;
        var int_array = <?php echo json_encode($int_array) ?>;
        var output = [];

        for (var i=0; i < (mz_array.length + int_array.length); i++ ) {
            output.push ( i%2 ? int_array[i] : mz_array[i] );
        }

        var disp = window.open('','','width=400,height=150');
        $(disp.document.body).text( output.join("\t") );
    });
});

edited Feb 18 '13 at 14:57

answered Feb 18 '13 at 14:24

nbrooks

18,126
5
54
66

Could you perhaps explain what this should be doing as it doesn't seem to do anything when I click the button. – Bas Jansen Feb 18 '13 at 14:28
Any way that this could be redirected to a new window instead due to the array's size? – Bas Jansen Feb 18 '13 at 14:37
how about http://stackoverflow.com/questions/3841100/write-content-to-new-window-with-jquery – John Boker Feb 18 '13 at 14:38
I hadn't seen that question when I was looking but that's also slightly different. I don't have a DIV that contains the data that I want sent to a new page. I have the 2 arrays (corresponding size) that I want printed on a new window/screen. – Bas Jansen Feb 18 '13 at 14:43
1

@BasJansen You can do something like the answer in this question, but instead of alert you would do var w = window.open(); $(w.document.body).html(output.join("\t")); – John Boker Feb 18 '13 at 14:51
I accepted this as that is what I would want ;) Now if i could only get it to work for my data... – Bas Jansen Feb 18 '13 at 15:02

Printing an array to a new window using jquery

1 Answers1