Get a single string out of a php array via jquery and load it inside a html div

Question

I am trying to get the string "Name n" out of the php array $F[], which is randomised inside the function DataInit1(), and put it in a div inside my html file. However, the PHP file cannot be changed because the arrays are randomised and used to plot a series of graphs.

PHP file:

<?php
$Return = array();
$P = array();
$S = array();
$F = array();

$P[] = [0];
$S[] = [[0.00,111],[0.50,104.74],[1.00,91.29],[1.50,93.28],...];
$F[] = "Name 1";

$P[] = [0];
$S[] = [[0.00,199],[0.50,84.06],[1.00,82.43],[1.50,83.02],...];
$F[] = "Name 2";

for($i=0; $i<count($P); $i++)
{
$Return[] = $P[$i];
$Return[] = $S[$i];
$Return[] = $F[$i];
}
die(json_encode($Return));

?>

HTML file:

<div id="GRAPH">
    <div id="title"><h1 id='graphtitle'></h1></div>
       <h1 id='GraphNum'></h1>
    <div id="chart"></div>
        <h1 id='PointNum'></h1>
</div>

The string should be placed in the "ARRAY $F" as shown below in the JS file:

function DataInit1()
{
$.ajaxSetup({cache: false, async: false});
$.getJSON("data1.php",
    function(Data1)
    {   
        SeriesList = [];
        CurrentGraph.Series = 0;
        for(var i=0; i<Data1.length; i+=3)
        {
            var P = Data1[i+0];
            var S = Data1[i+1];
            var F = Data1[i+2];
            var NewSeries = new SeriesClass(P,S,F);
            NewSeries.SeriesNumber = (i/3)+1;
            SeriesList.push(NewSeries);
        }
    }
);

for(var i=SeriesList.length-1; i>0; i--) 
{
    var j = Math.floor(Math.random() * (i+1));
    var x = SeriesList[i];
    SeriesList[i] = SeriesList[j];
    SeriesList[j] = x;
}
}

........

function Title()
{
    $("#title").show();
    $.ajaxSetup({cache: false, async: false});
    $.getJSON("data1.php",
        function(data)              
        {
            var name = ARRAY $F; 
        });
    $("#graphtitle").html(name);
}

Any other idea or suggestion on this issue will be very welcome. Thank you.

UPDATE:

Based on the suggestion by ironpilot. Could the solution be something like this?:

function Title()
{
$("#title").show();
$.ajaxSetup({cache: false, async: false});
$.getJSON("CurrentGraph.Series",        
    function(data)                 
    {   
    var titleGraph = (json_decode($F, true));
    var name = data.titleGraph[0];  
    $("#graphtitle").html(name);
    });
}

Answer 1

You have a few issues in your code that you would need to correct before this is possible. First let's look at your PHP code. It appears that you want to create a few parallel arrays and then return them to your front-end code. However, the way that you add each array into the $Return array makes predicting where the elements are nearly impossible.

Let's start by converting the $Return variable to an object of stdClass. This will allow you to specify arbitrary properties on the object and make them accessible via a JavaScript object.

<?php
$Return = new stdClass();
$Return->P = array();
$Return->S = array();
$Return->F = array();
$P = array();
$S = array();
$F = array();

$P[] = [0];
$S[] = [[0.00,111],[0.50,104.74],[1.00,91.29],[1.50,93.28],...];
$F[] = "Name 1";

$P[] = [0];
$S[] = [[0.00,199],[0.50,84.06],[1.00,82.43],[1.50,83.02],...];
$F[] = "Name 2";

for($i=0; $i<count($P); $i++)
{
    $Return->P = $P[$i];
    $Return->S = $S[$i];
    $Return->F = $F[$i];
}
die(json_encode($Return));

?>

Now that we have a little more predictable object to work with we can correct the jQuery code:

function Title()
{
    $("#title").show();
    $.ajaxSetup({cache: false, async: false});
    $.getJSON("data1.php",
        function(data)              
        {
            var name = data.F[0]; //Select the first element of the $F array.
            $("#graphtitle").html(name);
        });
}

Now that we have an object that is returned from PHP you can access the array of names specifically to get the value that you need with var name = data.F[0];. Additional since this variable was declared with the var keyword inside the success function it's value would not be accessible outside of that function where it was set.

We also needed to move your selector for #graphtitle inside the jQuery success method. Since this method is actually a promise and doesn't execute until the AJAX request completes, what would have happened is that the function to set the html content of the element you were selecting would have executed before you received a response from the server with the content to place. This is called a Race Condition: https://en.wikipedia.org/wiki/Race_condition.

I hope that helps!