Is there a way to generate buttons for values that are stored within an array, which is nested inside another array?

I am currently facing difficulties in creating buttons for values within an array, which are also nested inside another array. As an example:

let numbers = [{"allNum": ["0", "1", "2", "3","4"]}, {"evenNumbers": ["2", "4"]}];

If I want to create buttons for all the values within allNum, do I need to use a combination of forEach() and createElement? And should it be implemented like this?

// Suppose there is an html element with id "li"
var liEl= document.querySelector ("li");
function createBtn (allnum) = { document.createElement("button")
liEl.appendChild (createBtn);
return createBtn;
};
numbers.forEach (createBtn)

Thank you for taking the time to assist!

javascriptarrays

Answer №1

Just a little bit of formatting needed on your end, but I believe this is the solution you were looking for. You could have also considered using a foreach loop as an alternative method :)

for (i in numbers[0].allNum) {
    let btn = document.createElement("button");
    btn.setAttribute('id', i);
    btn.innerHTML = i;
    document.body.appendChild(btn);
}

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

I'm having trouble showing items retrieved from the AppSync API

When trying to display items from my appsync API in my React app, I encountered an error stating that 'listTestModels' is undefined. I need help fixing this issue as I understand that there may be errors in my code. import React, { useState } fro ...

javascriptreactjsapiaws-appsync

The dot notation in JSON syntax allows for easy access

Recently, I've been struggling with referencing a variable in JSON dot notation within my meteor application. It seems that when trying to access respJson.userlower.name, userlower is not being recognized as a valid variable. Is there a workaround for ...

javascriptjsonmeteor

Properly configuring paths in react-native for smooth navigation

When working on my React-Native project, I noticed that my import paths look something like this: import { ScreenContainer, SLButton, SLTextInput, } from '../../../../../components'; import { KeyBoardTypes } from '../../../../../enums ...

javascriptnode.jsreactjstypescriptreact-native

What is the best way to input information into an object?

I am having an issue where I am trying to add data into an object, but I keep getting the error "push is not a function". Here is the object in question: var item = { "_id": { "$oid": "asdf976" }, "Categories": [{ "mainmodels": [{ "su ...

javascriptarraysjson

Is there a way to save a collection of audio samples as a wav file using Node.js?

In my JavaScript code, I am developing an oscillator that generates a sweep (chirp) between different sine wave frequencies. To test this functionality, I would like to save the samples (which are in floating point format) to a WAV file. Can anyone provi ...

javascriptnode.jsaudiowavjavascript-oscillator

Steps to include a tooltip on a button that triggers a modal

I am currently utilizing Bootstrap and jQuery to enhance the functionality of components in my application. I am specifically looking to incorporate tooltips into certain elements. The tooltips are implemented through jQuery within my index.html page: < ...

javascriptjquerybootstrap-modaltooltip

Setting the startup value does not automatically select the value

Check out this angular.js example I created to demonstrate my issue: example I am trying to set the initial value of a select element to a specific value. <select name="i" id="i" ng-model="selectedItem"> <option ng-repeat="i in items ...

javascriptangularjs

Is there a way to transfer a JSON map object from Flask and then utilize it as a JavaScript object?

python server code from flask import Flask, render_template, request import os import sys import json data_raw = [('0', '1', '0', '0'), ('0', '0', '1', '0'), ('1', ...

javascriptpythonjson

Utilizing .affix for a sidebar with a fixed navigation bar

I am currently working on the development of a website that includes a fixed navigation bar. Check it out here: In addition to the fixed navbar, there is also a "sticky" sidebar featuring links that act as anchors to specific content within the same page. ...

javascriptcsstwitter-bootstrapaffix

Arranging a string array in JavaScript according to an integer array

Looking at the provided javascript arrays: letterArray ['a', 'e', 'i', 'o', 'u'] We also have another array that corresponds to it: valueArray [12, 22, 7, 7, 3] The goal is to sort the valueArray into: ...

javascriptsorting

Plotting two arrays side by side for comparison

I have a pair of two-dimensional arrays that contain data. Both arrays share the same dimensions and are stored in a file with a .CSV extension. Here is an example of one array: https://i.sstatic.net/PTLAm.png The delimiter used is ; Can you advise me ...

arrayspython-3.xmatplotlib

Is it necessary to perform a specific action if the text within a div matches pre

I've been struggling to make this work properly. Even after removing the AJAX POST function, the issue persists. No alerts or any indication of what's going wrong. Check out the code on JSFiddle: HTML <div class="notification"> ...

javascriptjqueryhtmlajax

Scope of variables in asynchronous functions within a module

Hello, I am new to node.js so please bear with me if my question seems basic. The code I have written works fine, but I am struggling to match the name (url) that starts with http.get with the result obtained from the website. I came across a similar issu ...

javascriptnode.jsasynchronous

A guide to calculating the difference using the MINUS function in Google Sheets

Currently, I am dealing with a CSV file where I am in need of over 100 unique numbers that all add up to equal 10. Ideally, I would like a cell to appear as follows: 76 - ("Unknown" Number) = 10 Within the CSV file, the first column represents the item pr ...

arraysgoogle-sheetsgoogle-sheets-formulaarray-formulassubtraction

Iterate through a collection of objects and classify/sort/categorize them according to the shared key-value pairs

My data includes information about different players. "players": [ { "name": "Molla Wague", "position": "Centre-Back", "jerseyNumber": 13, "dateOfBirth": "1991-02-21", "nationality": "Mali", "contractUntil": "2018-06-30", ...

javascriptarraysreactjssortingecmascript-6

Is it possible to simultaneously send a JSON object and render a template using NodeJS and AngularJS?

I'm currently facing issues with my API setup using NodeJS, ExpressJS Routing, and AngularJS. My goal is to render a template (ejs) while also sending a JSON object simultaneously. In the index.js file within my routes folder, I have the following s ...

javascriptangularjsnode.jsajaxexpress

What is the best way to link multiple return statements in Node.js using ioredis?

Currently utilizing ioredis and interested in retrieving the path and value shown in the code snippet below up to the anonymous function. console.log( function (jsonGraphArg) { return Redis.hget(jsonGraphArg[0], jsonGraphArg[1], function(error ...

javascriptnode.jsredisnode-redis

Path expression is not valid as it attempts to access an element

When attempting to modify a single element in an array, I encounter the error message Invalid path expression near attempt to access element. Interestingly, this issue only arises when the array is obtained from --rawInput. For instance: # input: [ 1, 0 ...

arraysjsonjqjson-path-expression

The $interval cancellation in AngularJS is not functioning as expected, and neither the onDestroy nor stateChangeSuccess events are working as

Below is a snippet of code I wrote to set up an interval that should be canceled when leaving the state, but it's not working as expected. var init = function () { $translatePartialLoader.addPart("app/bottling/palletTnT/palletTnT.grid"); ...

javascriptangularjs

Ways to ensure that a jQuery function does not run until another one has finished

My JQuery functions are as follows: First Function $(function(){ $(".staffDiv div").hide(); $(".staffDiv img").hover(function(){ $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast"); $(this) ...

javascriptjqueryhtml