Send JSON value into URL

Question

I have a JSON object:

[{"page":"Test",
    "seconds":"56",
}]

And I'm trying to use Javascript to load the 'page' value into my URL when it's loaded and after the amount of seconds in the 'seconds' value, refresh the page.

When I click the link <a href="testpage.php?screen=1"></a> I don't want the URL to ever be just testpage.php?screen=1 but I want the page load to immediately append the value of 'page' to the URL like so:

testpage.php?screen=1&page=Test

Here's the script I have so far:

<script type="text/javascript">
let obj = <?php echo $object; ?>;//This is my JSON object, already encoded and parsed

let params = new URL(document.location).searchParams;
params.set("page", obj[0].page);

window.setTimeout(function () {
    window.location.href = /*not sure here*/;
}, obj.seconds * 1000);

</script>

ANy help on completing this script is much appreciated, I'm just not sure how to complete this to perform the appropriate function.

UPDATE:

Trying to show and hide content based on an interval

If my JSON has elements with one page ID then this works fine, but if there are 2 elements for page 1 and 2 elements for page 2, it doesn't work.

I would like to show elements for the first page and after the interval show the next element instead

let obj = [{
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "86",
    "panel_type_id": "2",
    "cont_id": "138",
    "contID": "138",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nLeft 93<\/p>\r\n<\/body>\r\n<\/html>"
  },
  {
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "3",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight 93<\/p>\r\n<\/body>\r\n<\/html>"
  },
{
    "pageID": "94",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "75",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "88",
    "panel_type_id": "3",
    "cont_id": "140",
    "contID": "140",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight New<\/p>\r\n<\/body>\r\n<\/html>"
  }
];
let counter = 0;

var fullContent = document.getElementById('fullContent');
var leftContent = document.getElementById('leftContent');
var rightContent = document.getElementById('rightContent');

var fullColumn = document.getElementById('fullColumn');
var leftColumn = document.getElementById('leftColumn');
var rightColumn = document.getElementById('rightColumn');



setInterval(() => {
  const currentJSONobject = obj[counter];

  if (currentJSONobject.page_type_id == 1) {

    leftColumn.style.display = "none";
    rightColumn.style.display = "none";
    

    if (currentJSONobject.panel_type_id == 1) {

      fullContent.innerHTML = currentJSONobject.content;
    }

    //If half page    
  } else if (currentJSONobject.page_type_id == 2) {

    fullColumn.style.display = "none";


    if (currentJSONobject.panel_type_id == 2) {

      leftContent.innerHTML = currentJSONobject.content;

    } else if (currentJSONobject.panel_type_id == 3) {

      rightContent.innerHTML = currentJSONobject.content;
    }
  }

  $('#middle').css('background-image', 'url(' + currentJSONobject.background_img + ')');

  counter += 1;
  if (counter === obj.length) {
    counter = 0;
  }

}, 1500)
console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row middle">
  <!-- Full Page Divs -->
  <div class="col-lg-12" id="fullColumn">
    <div class="fullContent" id="fullContent" style="height: 100%; ">
    </div>
  </div>
  <!-- End Full Page Divs -->

  <!-- Half Page Divs -->
  <div class="col-lg-6 leftColumn">

    <div class="leftContent" id="leftContent" style=" height: 100%; ">

    </div>
  </div>

  <div class="col-lg-6 rightColumn">

    <div class="rightContent" id="rightContent" style=" height: 100%; ">

    </div>

  </div>
  <!-- End Half Page Divs -->
</div>

Answer 1

I hope the following code works for you.

The following code has been written keeping in my mind that the last element of the obj array will be used to do the reload.

<?php //testpage.php
    $arr = array(
        array("page"=>"Test","seconds"=>2),
        array("page"=>"Dummy","seconds"=>3),
    );

    $object = json_encode($arr);
?>
<h1>This is test page </h1>

<script type="text/javascript">
    function reloadPage() {
        var obj = <?php echo $object?>;
        alert("Page is going to reload in "+obj[obj.length-1].seconds+" seconds");
        let newUrl = new URL(document.location);
        newUrl.searchParams.set("page", obj[obj.length-1].page);
        window.setTimeout(function() {
        window.location.href = newUrl.href;
        }, obj[obj.length-1].seconds * 1000);
    }

    var url = new URL(document.location);
    if(!url.searchParams.get("page")){
        window.addEventListener('load', reloadPage, false );
    }
</script>

Answer 2

You need to save the new URL object in a variable so you can modify it as a whole.

let newUrl = new URL(document.location);
newUrl.searchParams.set("page", obj[0].page);
window.setTimeout(function() {
    window.location.href = newUrl.href;
}, obj[0].seconds * 1000);