Getting information from a JSON file in d3 - what's the process?

After constructing this bar chart in D3, which can be accessed here(http://jsfiddle.net/YQthy/), I am looking to substitute the random data with information from a JSON database.

{
  "description" : "Cheese, caraway",
  "group" : "Dairy and Egg Products",
  "id" : 1008,
  "manufacturer" : "",
  "nutrients" : [
     {
        "description" : "Protein",
        "group" : "Composition",
        "units" : "g",
        "value" : 25.18
     },
     ...
    ],
  "portions" : [
     {
        "amount" : 1,
        "grams" : 28.35,
        "unit" : "oz"
     }
  ],
  "tags" : []

}

The plan is for the parent node's value (cheese, Caraway) to become a variable obtained through a drop down selection. Subsequently, the child node description will serve as the label, and the "value" attribute will be used as the data.

javascriptjsond3.js

Answer №1

Here is a suggestion for you to try:

I have incorporated a dropdown select box in the HTML code.

<select class="my"></select>

The options for the dropdown will be fetched from a JSON file.

In addition, I have included a custom function as well.

 var length = json.length, index, data, filterData = [], defaultSelection = '';
  defaultSelection = json[0].id;
 for(index = 0; index < length; index++) {
   data = json[index];

filterData[data.id] = data.nutrients;
  d3.select("select.my")
    .append('option')
    .attr("value", data.id)
    .append("text")
    .text(data.description);
}

And much more...

Check out the DEMO for reference.

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

Integrate jQuery into your Spring MVC application

Struggling to integrate jQuery into my Spring MVC application as a beginner in Spring MVC. I've created a 'js' folder under the webapp directory, but unsure how to include the file in my view. I attempted: <script type="text/javascript" ...

javajavascriptspring-mvc

What is the reason behind MSIE 8 displaying an HTTP status code of 12150?

I'm encountering an issue with an unusual HTTP status code while using MSIE8. When I make an HTTP GET request to the following URL: /cgi-bin/objectBrowser/snap.pl?file_key=28 Upon inspecting the Raw response in Fiddler, I observe the following: H ...

javascriptjqueryajaxperlhttp

Creating seamless online payments using Stripe and Bootstrap

I'm new to integrating Stripe for payment processing on my Bootstrap website and currently utilizing Stripe.js v2. As far as I understand, the process involves my HTML form communicating with Stripe via JavaScript to obtain a token (or handle any err ...

javascriptjquerytwitter-bootstrapbootstrap-4stripe-payments

Easily linking a React app to MongoDB

I recently developed a basic react app using 'create-react-app'. The app includes a form, validation, and Bootstrap components. It may not be extravagant, but it functions flawlessly. Furthermore, I registered with MongoDB to obtain a compliment ...

javascriptnode.jsmongodbreactjs

AngularJS directive created for validation on blur

I am striving to replicate some of the features found in Angular 1.3.X for the app I am developing, with a particular focus on ensuring compatibility with IE 8. Unfortunately, this constraint means that I cannot utilize version 1.3.X. I have encountered di ...

javascriptangularjsangularjs-directive

The modal window obstructs my view on the screen

You are working with a modal form that triggers a POST method in your controller https://i.sstatic.net/0vbOy.png Here is the view code: <div class="modal fade" id="agregarProducto"> <div class="modal-dialog" role="document"> < ...

javascriptjqueryasp.net-mvcformsmodal-dialog

Tips on preventing the opening of a new browser tab by using Ctrl + click

Hey there, I've got a list of products that can be selected using the Ctrl key. $(parentSelector).on("click", function (evnt) { evnt.stopImmediatePropagation(); var item = $(evnt.delegateTarget) ...

javascriptjqueryhtml

Having trouble retrieving the innerHTML of a span tag in a JavaScript function

I'm currently working on creating an email message that will have pre-filled text from an asp:Literal when a user clicks a link. The HTML code for this is structured like this: <tr> <td> <img src="../../images/Question.gif" ...

javascriptasp.nethtml

Replace automatically generated CSS with custom styles

When using a Jquery wysiwyg editor, I have encountered an issue where it automatically adds code to the textarea at runtime. The problem arises from it inserting an inline style of style="width:320px" when I need it to be 100% width due to styles already ...

javascriptjqueryhtml

Revamping the vertices and UVs of DecalGeometry

I am currently experimenting with ThreeJS decals. I have successfully added a stunning decal to my sphere. Below is the code snippet I am using to place the decal on my sphere. (Please disregard any custom classes mentioned in the code.) // Creating the ...

javascriptthree.jsgeometrydecal

Limit the number of AJAX requests running simultaneously using jQuery

Looking to optimize a series of AJAX events with a limit of 5 simultaneous requests and queueing up the rest. Consider the scenario below: $("div.server").each(function() { $.ajax(....); }); With potentially 100 divs containing the class server, o ...

javascriptjqueryajax

Utilize jq to Transform JSON File into CSV Format

I've been utilizing curl to retrieve Alien Vault OTX pulses from their API. Once I receive the initial output in json format, my goal is to convert it into csv using jq for compatibility with other software. Many have recommended jq for this purpose, ...

jsoncsvjq

Material-UI: The `paperFullWidth` key passed to the classes prop is not supported within the WithStyles(ForwardRef(Dialog)) component

When using Material-UI, please note that the key paperFullWidth provided to the classes prop is not implemented in WithStyles(ForwardRef(Dialog)). You are only able to override one of the following: root. <Dialog classes={{ paperFullWid ...

javascriptreactjsmaterial-uireact-with-styles

Toggle the visibility of a component by clicking on a specific title within a table, dependent on the column title in Angular 9

Currently, I am developing an Angular application focused on creating a COVID-19 tracking app. In this project, I have designed 2 components - Component A displays a list of all states, while Component B lists all districts within a particular state. To ...

javascriptangulartypescriptangular2-template

What is the safest way for a function within a JavaScript hash to invoke another function in the same hash?

Below is a JavaScript/ES6 method that returns a hash with two methods - writeA and _write. The goal is to call writeA from outside of the hash, but this method needs to call _write, defined right below it, to complete its task. getHash = () => { re ...

javascriptnode.jshashmapecmascript-6

Utilizing a MySQL Database Pool in combination with Node.js and Restify

I'm currently diving into the world of node.js as I develop a backend for a mobile app that is expected to accommodate numerous users. Although this is my first time working with node.js, I have been diligently following a tutorial on establishing con ...

javascriptmysqlnode.jsrestify

Angular UI.Bootstrap radio buttons behave oddly when used in conjunction with ng-repeat

Having trouble dynamically generating options for a radio model using Angular's ui.bootstrap. I attempted to ng-repeat over an array to use its contents for the btn-radio attribute as shown below: //In the controller $scope.radioModel = undefined; $ ...

javascriptangularjsangular-ui-bootstrap

Looking to find a consistent method to adapt the code for use in both API and regular rendering purposes

Is there a way to configure my node.js application to return JSON data for API calls while rendering HTML pages for regular requests, all while following proper design patterns? For instance: When someone visits mysite.com/products, they see the product ...

javascriptjsonnode.jsrestexpress

Is "Invalid Date" indicating an incorrect date?

Have you ever wondered why JavaScript returns 'Invalid Date' when setting an (invalid) date? It can be quite confusing and make it difficult to handle errors. So, what is the optimal way to deal with this issue? One approach is to check the date ...

javascript

What could be causing React to render only the final two elements of my array?

I am currently working on a project where I need to display a series of images from a folder. While I have managed to accomplish this, I am facing an issue where the images are being displayed in rows of 2. Although the implementation is successful, it see ...

javascriptreactjs