As someone who is new to javascript and coding in general, I am facing a challenge with filtering and manipulating data received through an AJAX request. Unfortunately, I do not have access to the server-side code. The server responds with rota information when given a date, and within this response is a div with the id "medStaff" that contains a table.
I have two requests resulting in tables, and I need to merge these results and show only specific columns.
Since the required resource is only available on our intranet, I am currently mocking up the scenario using jQuery.get and a locally saved copy of the resource instead of jQuery.post. This is why I cannot use jQuery.load with the container ID and CSS styling to display only the necessary parts of the table - as it works fine locally but not in the real application.
It seems like the best approach would be to use filters on the AJAX response, focusing on the top-level div I need, followed by nth-child selectors to extract the desired table data. However, I am struggling to make any progress with this. Specifically, I am trying to extract the first and second columns of the table within the identified division. Below is the code snippet where I am stuck:
<html>
<head>
<script src="jquery.js"></script>
</head>
<div id="div1" ></div>
<div>
<script>
$.get("Medicine%20%20AGM%20Medical%20Staff%20by%20Firm.htm", function(response) {
$(response).filter( '#medStaff' );
document.getElementById("div1").innerHTML = response;
});
</script>
</div>
</form>
</html>
Any advice or guidance would be greatly appreciated. Thank you, R