Creating a dynamic JSON object and retrieving the response in a JSP for data-driven documents

I am a beginner with the D3 API and I need to create a tree-like structure using a JSON file with hardcoded values. Additionally, I have a servlet that retrieves some values from a database which I want to dynamically convert into JSON in the servlet and send back the response to D3. Below are snippets of my HTML where I've written the D3 code. I'm able to generate JSON using a Java class but facing issues calling it from D3.js. Also included are excerpts from my Java file containing the created JSON and the HTML file...

public class Test {

// Java code for creating hierarchical data
...

}

This is our JSON:

{
    "children": {
        "Toyota": {
            ...
        },
        "Honda": {
            ...
        }
    }
}

Below is my HTML file:

<meta charset="utf-8">
...


<script type="text/javascript" src="d3/d3.v3.min.js"></script>
<script>

    // D3 script for displaying the tree structure
    ...

</script>

I need assistance in dynamically generating the JSON and sending the response back to the D3 API. Any help would be appreciated.

javajavascriptjsonservletsd3.js

Answer №1

The following script fetches the JSON file from your server through an AJAX call:

d3.json("graph.json", function(error, json) {
    root = json;
    update(); // responsible for generating the layout
});

Currently, the URL being used retrieves a static file named "graph.json" from the same directory as the HTML file on the server. You have the option to modify this URL to trigger doGet in your servlet and have doGet provide the dynamic JSON data you require.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Automate the process of manual content duplication with JavaScript's for each replacement

Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...

javascriptjqueryhtmleach

Tips for retrieving multiple values or an array from an AJAX request?

Is there a correct way to pass multiple sets (strings) of data back after executing an ajax call in php? I understand that echo is typically used to send a single string of data back, but what if I need to send multiple strings? And how should I handle th ...

javascriptphpjqueryajax

Looking for a way to view the files uploaded in a form using ajax?

Currently, I am encountering an issue while attempting to upload a file submitted in a form using PHP. To avoid page reloading, I have incorporated JS, jQuery, and AJAX between HTML and PHP. Unfortunately, I am facing difficulties with the $_FILES variable ...

phpjavascriptajaxfile

Transforming an array of strings to integers within a GraphQL query when they are incorporated

I need help finding a solution to pass an array of strings and embed it into a query while using React and GraphQL. The issue I'm facing is that even though the parameter is accepted as an array of strings, it gets converted to a string when embedded. ...

javascriptreactjsgraphqltemplate-literals

I am looking to enhance the readability of my asynchronous function calls

At the moment, I am handling my Promises by calling an async function and then chaining it with .then(). But I feel like there could be a more readable approach. This is how it currently works: const fetchData = async() => { const response = await ax ...

javascriptnode.jsreactjsaxios

If I use npm install to update my packages, could that cause any conflicts with the code on the remote server?

As I navigate through the numerous issues, I stumbled upon the command npm ci that is supposed to not change the package-lock.json file. However, when I attempt to run npm ci, it fails: ERR! cipm can only install packages when your package.json and package ...

javascriptnpm

Reactivating a React hook following the execution of a function or within a function in ReactJS

A new react hooks function has been created to retrieve data from an API and display it on the page: function useJobs () { const [jobs, setJobs] = React.useState([]) const [locations, setLocations] = React.useState({}) const [departments, setDepartm ...

javascriptreactjsfunctionreact-hooks

Unable to utilize the Object.values method with an object in TypeScript

I am attempting to create an array of values from all the keys within an object by using the Object.values(obj) function, but I encountered the following error message: No overload matches this call. Overload 1 of 2, '(o: { [s: string]: string; } | ...

javascriptreactjstypescriptnext.js

Using Pug/Jade, be sure to call a function during each loop iteration

I'm attempting to develop a basic app, similar to a TO-DO LIST. I want to generate divs dynamically (with incremental ids) when a Button is clicked and then enter some text into an HTML input field. For example: <div id="item1"> <div id="ite ...

javascriptjquerynode.jspugpugjs

Storing sound recordings with GridFS

I am currently facing an issue with the following code, it is only working partially and I require assistance in fixing it. The function saveAudioToGridFS() should return a file ID to its calling function. Despite verifying that the value to be returned ...

javascriptmongodbexpressgridfsgridfs-stream

Utilizing React Query with JSON-ready data formats

I've recently started using React query and came across the following information: According to React Query, structural sharing is only effective with JSON-compatible values. Other types of values will always be considered as changed. If you're ...

reactjsjsonreact-query

What is the best way to save a Firebase user's unique identifier in a React application?

In the process of developing a React web application, I am focusing on allowing users to register using their email and password. Once registered, each user will have access to their profile information. I have outlined my Firebase data structure below: ...

javascriptreactjsfirebasefirebase-authenticationfirebase-storage

The issue with Jquery.Validate not functioning properly when trying to upload a file

I have integrated jQuery validation into my ASP.NET MVC project, and it is functioning correctly with textboxes. However, I am encountering an issue with file uploads. Below is the code snippet I am using: @model ffyazilim.Management.Model.Credential.Crea ...

javascriptjqueryasp.net-mvcjquery-validate

"Exploring How to Read Multiple Values in the Request Body Using Node.js

I am new to NodeJs development and have a question. It may be basic, but I'm not sure how to proceed. I have a task to read a request field that can contain multiple values in a JSON array like this: { "email" : "<a href="/cdn-cgi/l/email-prote ...

node.jsarraysjsonrequestresponse

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

My form includes various input fields, dropdowns, and text areas. Upon loading, jQuery locates each element, sets its data attribute to a default value, attaches an onchange event, and triggers the change event. The issue arises when some dropdowns are d ...

javascriptjqueryhtmlajaxevents

Manipulating data in a C# application using JSON

I am currently developing a desktop application for managing requests and responses. So far, I have successfully implemented GET requests, but now I need assistance in understanding how to handle JSON requests and responses. Once I can parse the JSON dat ...

c#winformsjson

Tips for Embedding a Date into a String Format on a Website Form

How can I convert a date string like 23/8/1956 to the format "aug 23 1956" with the day, month, and year in separate fields on a Web form? I attempted to achieve this using the following function: public void formatDateString() throws ParseException { ...

javaselenium

Having trouble choosing options within Material UI's Autocomplete Component?

I'm having trouble selecting the options displayed in MUI's autocomplete component. It seems that using renderOption is causing this issue. I want to show an image along with the title in the component options, but without using renderOption, I h ...

javascriptreactjsautocompletematerial-uimaterial-design

When placing the script URL with a pound sign into the DOM, it gets truncated

When I receive URLs for trackers from an external resource, they often contain a # symbol which causes the URL to be cut off after the pound sign when trying to execute/load it in the DOM. Unfortunately, these URLs are provided by a 3rd party and I have no ...

javascriptjquery

How can I populate a Dictionary with a response from Swifty JSON?

Here is a sample (swiftyJSON) string response : { "siteName1" : "http://www.example1.com/", "siteName2" : "http://www.example2.com/", "siteName3" : "http://www.example3.com" } What approach would you use to populate the dictionary shown below : let dict ...

jsonswiftdictionary