Populating a drop-down menu with data from a JSON file using dat.gui

I am currently working on a drop-down menu using JavaScript. Below is the content of my JSON file:

{
 "bg1":"assets/bg/people_bg.jpg",
 "bg2":"assets/bg/people_bg.jpg"
}

My goal is to assign the names bg1 and bg2 to the backgrounds in the dropdown menu, allowing users to select different backgrounds. Here is the code snippet for using dat.GUI:

{
controller = new function() {
this.bg = '';
}
var gui = new dat.GUI();
f1 = gui.addFolder('Sphere');
f1.add( controller, 'bg', displayingNameOfBackground).onChange(function() {
    //if change using their path to change background
            );
javascriptjsonthree.jsdat.gui

Answer №1

If you're uncertain about the desired outcome, one approach is to tackle it in the following manner:

let data = {
  "background": {
    "bg1": "assets/bg/people_bg1.jpg",
    "bg2": "assets/bg/people_bg2.jpg"
  }
};

let controlPanel = new dat.GUI();
let folder = controlPanel.addFolder('Sphere');
folder.add(data, "background", data.background).onChange(function(value) {
  alert(value) // take action to modify background
});
folder.open();
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>

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

Creating a tree structure from JSON data involves adjusting the entries as demonstrated below, utilizing programming languages for implementation

Data Entry: const info = [ { type: 'Electronics', category: 'cellphone', price: 800, profit: 50, }, { type: 'Clothing', category: 'shoes', price: 100, profit: 30, }, { ty ...

javascriptjson

Submitting a form with AJAX and additional fields can be accomplished by including the extra fields in

Imagine a scenario where I am working with a basic form like the one below <%= form_for(@category) do |f| %> <% if @category.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@category.errors.count, "erro ...

javascriptjqueryruby-on-railsajaxruby-on-rails-4

How can we simplify deeply nested ajax callbacks in programming?

I have come across JavaScript code where the success callback of an Ajax handler triggers another Ajax call, which in turn may trigger yet another Ajax call. This results in deeply nested anonymous functions. Is there a smarter programming approach that ...

javascriptjqueryajaxcallback

Modifying HTML text with JavaScript according to the content of the currently selected div

Greetings! This is my first time posting a question, and I wanted to mention that I am relatively new to javascript/jquery. I have a gallery that displays image details on hover through text, while clicking on the image triggers a javascript function that ...

javascripthtmljquery

What distinguishes node from node js?

Following the instructions on https://nodejs.org/en/download/package-manager/, I installed Node.js. Upon checking the current version using: :~/Downloads$ nodejs -v I discovered that I was running v4.2.6, which is an older version. Deciding to update, I ...

javascriptnode.jsubuntunpmnvm

The data labels in the main chart of a Highcharts column with drilldown appear blurry, with the exception of the columns that have been drilled

When setting up a Column Chart with Drilldown: The main chart displayed data labels in a blurred black color. However, when clicked, the next columns that appear (the drilled down columns) are clear and easy to read (white color, no blur). I discovered a ...

javascriptjquerycsshighcharts

Trouble accessing Silverlight site due to incomplete loading

There is a site known as that consists of a Silverlight application. Strangely, this site loads on all other computers except mine. I keep encountering the following error: An Error occurred in the Silverlight Application: String was not recognized as a ...

c#javascript.netsilverlightbrowser

Error Occurred While Transmitting JSON Data to the Server

I am trying to send JSON data to my controller's POST handler from the client side: var userName = $('#userName').val(); var password = $('#password').val(); var mail = $('#mail').val(); var admin =$("#admin").is(': ...

jqueryjsonspringrestspring-mvc

The way lights appear varies between Three.js and 3DS Max

I am currently working with the r65 version of Three.js. I have been creating scenes in 3ds Max, exporting them as OBJ files to load into Three.js. In addition, I have also been exporting the models as FBX files to extract lighting information and load it ...

three.jswebgllighting3dsmax

Ways to invoke a next.js api that implements next-auth programmatically

In my next.js app, I have integrated next-auth which is set up to allow authentication using Facebook and Google as providers. Additionally, there are some endpoints located in the pages/api folder of the app. These endpoints are accessed from standard ne ...

javascriptreactjsnext.jsnext-auth

What is the best way to transform an Object into an Array?

[ { id: '5b3a223296fb381a29cf6fd9', number: 1, name: 'Tablet White EliteBook Revolve 810 G2', dprice: '0', image: '' } ] This message is generated by the angular application. Upon inspecting its type, it was identi ...

javascriptnode.js

I'm utilizing bootstrap to design a slider, but the length of the second div inside it is longer than the slider div

https://i.sstatic.net/0iIPb.png To ensure that the second div appears above the slide div, I have applied the position:absolute property to the second div. Since the first div is a slide, I had to position the second div outside of the first div. Do you h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Checking the validity of subdomain names using JavaScript/jQuery

For users signing up, my form allows them to choose a subdomain for their account. The valid characters allowed in the subdomain are letters, numbers, and dashes. Spaces and most special characters should be filtered out. http://_________.ourapp.com To r ...

javascriptjqueryvalidation

Tips for Preventing Unnecessary Ajax Requests

What I require When a click event is triggered, a service call should be made only once. Use case Dropdown1 Dropdown2 Dropdown3 1. There are three dropdowns on the HTML page. 2. When Dropdown1 is called - an AJAX call is made only onc ...

javascriptjqueryajax

Can you explain the TypeScript type for the queryKey in React Query?

Currently utilizing react query in conjunction with typescript. What should be the type of arguments passed to the function? export const useIsTokenValid = () => { const { data: token } = useQuery<string | null>(['token'], getToken, { r ...

javascriptreactjstypescriptreact-nativereact-query

Leveraging the power of HTML 5 to dynamically insert content into a jQuery table

I am experiencing an issue with my jquery stock ticker. It displays the latest stocks including Company Name, stock price, and percentage changed. The stock price can be in GBP, USD, or YEN, but the current ticker does not indicate the currency. I attemp ...

javascriptjqueryhtml

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

javascriptjqueryhtml

Tips for Showing Certain Slides When the Page Loads

When using jQuery filter effects to organize div slides on a page, I encountered an issue where all the divs containing different slides are displayed on page load instead of just the default chosen ['active'] div. The filter effect itself is fun ...

javascriptjquerycsshtml

Check the status of a server using Json with the help of Alamofire and SwiftyJson

When working with Alamofire and SwiftyJson to parse Json data in a Table View, I am able to successfully parse the result section but encountering difficulties in fetching the status section using Swifty JSON. The main question is how can I correctly parse ...

jsonswiftxcode

Sort by label using the pipe operator in RxJS with Angular

I have a situation where I am using an observable in my HTML code with the async pipe. I want to sort the observable by the 'label' property, but I'm not sure how to correctly implement this sorting logic within the pipe. The labels can be e ...

javascripthtmlangulartypescriptrxjs