Как передать массив PHP в JS для использования в цикле? - PullRequest
Новая
       15

Как передать массив PHP в JS для использования в цикле?

0 голосов
/ 08 мая 2018

Context

Я создаю шаблон темы WordPress и пытаюсь передать массив данных из поля Advanced Custom Fields> Repeater, используя PHP и основные функции WordPress, в круговую диаграмму JavaScript / HTML5.

Проблема

Я не знаю, как передать данные PHP в JS в формате, понятном JS.

Вопросы

Я не уверен, что правильно задаю вопросы или правильно думаю о проблеме. Например, я считаю, что могу использовать JS для прямого взаимодействия с базой данных. Но вот что я думаю, вопросы:

  • Как передать массив PHP вне цикла в формат, читаемый в JS?
  • Каковы некоторые ссылки на учебные материалы или курсы по этому предмету?

Код

Вот мой код: 

<?php
if( have_rows('tpc_psmr_referrer') ):
  while ( have_rows('tpc_psmr_referrer') ) : the_row();
        $tpc_psmr_referrer_type = get_sub_field('tpc_psmr_referrer_type');
        $tpc_psmr_referrer_platform = get_sub_field('tpc_psmr_referrer_type_platform'); // This needs to get passed as an array to the JS below.
  endwhile;
endif;
?>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data1 = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2], // This is where the PHP array needs to be output.
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'Revenue'
  };

  var chart1 = new google.visualization.PieChart(document.getElementById('piechart1'));

  chart1.draw(data1, options);

  var data2 = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'Budget'
  };

  var chart2 = new google.visualization.PieChart(document.getElementById('piechart2'));

  chart2.draw(data2, options);
}
</script>

Ответы [ 4 ]

0 голосов
/ 08 мая 2018

Я думаю, вам нужно что-то вроде этого: 

<?php
$php_var = [['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2], 
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]];
?>


<script type="text/javascript">
    var data = <?= json_encode($php_var, JSON_HEX_TAG) . ';' ?>   
</script>

Смотрите это PHPFiddle .

Другие полезные ссылки:

как к пасс переменных-и-данных из-PHP к JavaScript

пройти-а-PHP-массив-к-а-JavaScript-функции

0 голосов
/ 08 мая 2018 
<?php $data_array = [1,2,3...]; ?>

<html>
  <div id='yellowstone' hidden>
     <?php echo json_encode($data_array); ?>
  </div>
</html>


<script>
     var array = JSON.parse(document.getElementById('yellowstone').innerHTML);
</script>
0 голосов
/ 08 мая 2018

WordPress имеет функцию под названием wp_localize_script. Это позволяет вам передавать массив в ваш скрипт и затем обращаться к нему в вашем JS как объекте.
Например: 

wp_localize_script( 'your_script', 'your_script_data',
    array( 
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'var_1' => 'value 1',
        'var_2' => 'value 2',
    )
);

Тогда где-то в вашем JS 

alert(your_script_data.var_1)

отобразит value 1

P.S. ajax_url содержит и URL-адрес для ваших вызовов AJAX, если вам это тоже нужно. Здесь есть некоторое объяснение этому.

0 голосов
/ 08 мая 2018

Посмотрите на json_encode (), который отображает значения в цикле while и отображает структуру данных, которая их содержит, в скрипте PHP. $ .ajax () запрашивает сценарий и анализирует / присваивает JSON, возвращенный во внешнем интерфейсе при обратном вызове успеха.

Более конкретно, для ссылок на дополнительную информацию о механизмах, вовлеченных в процесс, посмотрите на json_encode на php.net (пример 1 прост):

http://php.net/manual/en/function.json-encode.php

и документация по jQuery API для $ .ajax:

http://api.jquery.com/jquery.ajax/

script.php 

<?php 

  header("Content-type: application/json");

  $data_array = ['one','two','three'];
  $json = json_encode($data_array);
  echo $json;

?>

JS 

$('document').ready(function() {
    $.ajax({
        type:'POST',
        url:'/the/path/to/script.php',
        dataType:'JSON',
        data:{
        },
        success:function(data){
            $.each(data,function(x,y) {
                console.log(data[x]);
            });  
        },
        error:function(jqXHR,textStatus,errorThrown){
            console.log('Could not retrieve JSON');
        }

    });
});
...