What is the best way to manipulate an API AJAX JSON response and pass it to another page? – Jquery ajax

I think I have a tough one for you guys. Or at least it’s been tough for me. I’ve been searching for the best way to do this in Stack Overflow and everyone that has asked has been given a different response.

I have this code that is accessing an API and calling a maintenance list of all the vehicles in a fleet.

function getMaintenanceList() {
  var settings = {
    "url": "API URL HERE",
    "method": "GET",
    "timeout": 0,
    "headers": {
    "Authorization": "Bearer token here"
  },
  };

  $.ajax(settings).done(function (response) {
    // The response the API sends is a JSON object.
// It is an array.

var jsonMaintenance = response;
    var parsedJson = JSON.stringify(jsonMaintenance);

//Left over code from when I was trying to
//pass the data directly into the other page
// I was unable to do so
//return jsonMaintenance;

//Left over code from when this was in a PHP file
//and I was posting the stringified response to the page
// for testing purpose
//I had to disable CORS in Google Chrome to test the response out
//console.log(jsonMaintenance);
//document.getElementById("main").innerHTML = parsedJson;

});

};

The code above works well. What I was attempting to do here was write the stringified response to a file. Save that file in the server. Call it from another page using JavaScript and save it as an object in JavaScript, parse it using JSON.parse(), and then pull the required information.

Here’s an explanation as to why I’m trying to do it this way. When I call the maintenance list from the API, I’m getting the entire maintenance list from the API, but I need to be able to display only parts of the information from the list.

On one page, we’ll call it vehicle-list.php, on it I have a list of all the vehicles in our fleet. They all have unit numbers assigned to them. When I click on a unit number on this page it’ll take me to another page which has more information on the vehicle such as the VIN number, license plate, etc. we’ll call this page vehicle-info.php. We’re using this page for all the vehicles’ information, in other words, when we click on different unit numbers on vehicle-list.php it’ll always take us to vehicle-info.php. We’re only updating the DOM when we go to the page.

I only want to include the information specific to each vehicle unit in the page along with the other info in the DOM. And I only want to call the info from the API once as I am limited to a certain amount of calls for that API. This is why I am attempting to do it this way.

I will say that what I originally wanted to do was get this JSON response once every 24 hours by using a function in vehicle-list.php save the reponse as a variable as seen above var jsonMaintenance = response; and then just access certain parts of the array every time a unit number is clicked. However, I have been unable to access the variable in any other page. I’ve written many test files attempting to call jsonMaintenance without success so I’ve been trying to to just save it as a text file to the server and I haven’t been able to figure that out either.

After explaining all of the above. My questions are these:

How do I best manipulate this data to accomplish what I want to accomplish? What would be the best standard? Is the above code even the right way to call the data for what I’m trying to do?

There doesn’t seem to be a set standard on accomplishing any of this when I search on Stack Overflow. I’d like to be as efficient as possible.

Thank you for your time.