Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Assistance Needed... Variable to JSON array

    Hello:

    This is my first post on this forum, so I am going to try and ask for some assistance with piece of code I am stumped upon...

    Description:

    I have a site which displays an image, on top of it, I have a Canvas in which the client will click and leave a "Dot". This dot marks the coordinates (X,Y)

    I have managed to make this happen and I can get JavaScript to even display the array being created every time the mouse clicks inside the canvas...

    example:

    {"x":"123","y":"321"},{"x":"231","y":"431"},{"x":"254","y":"455"},{"x":"90","y":"222"},

    Unfortunately... Once I submit the string of the array (via PHP to a CSV file for now) I am getting mixed results...

    example:
    {\"X\":\"373\" <-- This in one cell
    \"Y\":\"233\"} <-- This in the next

    I assume the issue is that the file is a CSV so the comma is taken as a separator... yet for some reason I get the backslashes added too... (Still do not understand why).

    I have tried using:

    var json_array = '<?php echo json_encode('+globalCoordinates+'); ?>';

    with no success...

    I hope what I have explained so far makes any sense.


    Here is the portion of the Code I have so far...

    ====================
    ==== JavaScript ====
    ====================


    var mouseX, mouseY;
    var myCanvas = document.getElementById('myCanvas');
    var context = myCanvas.getContext('2d');
    var radius = 8;
    var count = 0;

    myCanvas.addEventListener('mousemove', mouseMoved,false);
    myCanvas.addEventListener('click', mouseClicked,false);

    function mouseMoved(e){
    mouseX = e.pageX - myCanvas.offsetLeft-25;
    mouseY = e.pageY - myCanvas.offsetTop -62;
    }
    function mouseClicked(e){
    context.beginPath();
    context.arc(mouseX, mouseY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = '#FF1111';
    context.fill();
    count == count++;
    document.getElementById('count').innerHTML='Total: '+count;
    document.getElementById('pcount').value= count
    getCoordinates(mouseX +","+ mouseY);
    //alert(globalCoordinates);
    }

    var globalCoordinates = new Array();
    function getCoordinates(){
    globalCoordinates.push('{"X":"'+ mouseX +'","'+'Y":"'+ mouseY + '"}');
    displayCoords();
    };

    $(function() {
    $("#pcount").focus();
    });


    function displayCoords(){
    var json_array = '<?php echo json_encode('+globalCoordinates+'); ?>';
    document.getElementById('coordinatesTemp').innerHTML = ('<input type="text" name="coordinates" value="'+json_array);
    //document.getElementById('coordinatesTemp').innerHTML = globalCoordinates;
    };

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    i think your php should be without quotes:

    Code:
    var json_array = <?php echo json_encode(globalCoordinates); ?>;
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    htakeuchi (09-30-2013)

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,020
    Thanks
    15
    Thanked 239 Times in 239 Posts
    If you set a javascript array as the value of an input, it will appear on the php side as a comma separated string of values. That's entirely without using JSON. So if you 'pushed'

    mouseX +"|"+ mouseY into globalCoordinates you would have something like this

    137|234,322|412 etc. at the php end, which could be exploded by first the , then the | to give your results.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    htakeuchi (09-30-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •