What is the best way to loop through an array or object and append specific items to an list item (li)

Hey there, this question might be a bit unclear as it's my first one. I'm currently in the process of learning JavaScript and have been grappling with a problem for hours now. The task at hand is to add specific objects from an object into an unordered list (ul).

{
"dsl": {  
"DSL-I-100000": {
    "DSL-I-100000": {      // Instructions for adding to an li  
        "priority": "1",  
            "standard": true,  
            "customer": true,  
            "internet": true,  
            "business": true,  
            "consumer": true,  
            "filename": "DSL-I-100000.json",  
            "download": "100",  
            "vpCategory": "dsli"  
    }
},  
"DSL-IP-100000": {  
    "DSL-IP-100000": {    // Instructions for adding to an li  
        "priority": "1",  
            "standard": true,
            "customer": true,
            "internet": true,
            "phone": true,
            "business": true,
            "consumer": true,
            "filename": "DSL-IP-100000.json",
            "download": "100",
            "vpCategory": "dslip"
    }
},  
"DSL-IP-16000": {    
    "DSL-IP-16000": {     // Instructions for adding to an li  
        "priority": "1",  
            "standard": true,
            "customer": true,
            "internet": true,
            "phone": true,
            "business": true,
            "consumer": true,
            "filename": "DSL-IP-16000.json",
            "download": "16",
            "vpCategory": "dslip"
    }
},

My tutor referred to this task as creating a list with the 'metacode' - '"DSL-I-100000"', "DSL-IP-100000", "DSL-IP-16000". As someone with limited JS knowledge, could you guide me on the best approach to tackle this? Please explain it in simple terms. Thank you so much!

javascriptarraysajaxobjecthtml-lists

Answer №1

To extract the keys from obj.dsl, loop through each key and create a corresponding li element.

const obj = {
  dsl: {
    "DSL-I-100000": {
      "DSL-I-100000": {
        priority: "1",
        standard: true,
        customer: true,
        internet: true,
        business: true,
        consumer: true,
        filename: "DSL-I-100000.json",
        download: "100",
        vpCategory: "dsli",
      },
    },
    "DSL-IP-100000": {
      "DSL-IP-100000": {
        priority: "1",
        standard: true,
        customer: true,
        internet: true,
        phone: true,
        business: true,
        consumer: true,
        filename: "DSL-IP-100000.json",
        download: "100",
        vpCategory: "dslip",
      },
    },
    "DSL-IP-16000": {
      "DSL-IP-16000": {
        priority: "1",
        standard: true,
        customer: true,
        internet: true,
        phone: true,
        business: true,
        consumer: true,
        filename: "DSL-IP-16000.json",
        download: "16",
        vpCategory: "dslip",
      },
    },
  },
};

const ul = document.querySelector("ul");

Object.keys(obj.dsl).forEach(key => {
  const li = document.createElement("li");
  li.innerText = key;
  ul.appendChild(li);
})
<ul>
</ul>

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

Guide to implementing an AJAX loader during page load in PHP

Can anyone assist me in creating a page loader for when the page is loading? I am working on implementing a PayPal payment system. I have noticed that some pages display a loader (ajax loader) while directing to the PayPal gateway. I also want to add an ...

phpjqueryajax

Managing uncaught exceptions in node.js

While working on my project, I encountered an issue with catching exceptions when opening a connection using mongoose.createConnection. Here's the code snippet causing the problem: var createdDb = mongoose.createConnection(connectionString); createdD ...

javascriptnode.jserror-handlingmongoose

Vue automatically refreshes momentjs dates prior to making changes to the array

I am dealing with a situation where my child component receives data from its parent and, upon button click, sends an event to the parent via an event bus. Upon receiving the event, I trigger a method that fetches data using a Swagger client. The goal is ...

javascriptvue.js

Changing pointers in an array within a function

void replace(int* buffer) { int* temp = new int[5]; for (int i = 0; i < 5; i++) { temp[i] = i; } buffer = temp; } void start(int argc, char* argv[]) { int* a = new int; ...

c++arrayspointers

Steps to develop a collaborative NPM package

I am currently in the process of developing an NPM package using Typescript that contains solely my type interfaces. At the moment, my project has the following folder structure: project │ index.ts │ └───types │ restaurant.ts │ ...

javascriptnode.jstypescriptnpmrollup

Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

I am looking to create a Vue async component that stays in a loading state until a custom event is triggered. This means it will render a specified loading component until the event occurs. Here's an example of how I want it to work: const AsyncComp ...

javascriptvue.jsasynchronous

The AngularJS uib-typeahead feature seems to be disrupting the interpolation process for the entire page

Encountering an issue with AngularJS 1.50 where interpolation stops working after a specific line of code. <input type="text" class="form-control" id="search" name="search" placeholder="{{ shouldInterpolateButDoesnt }}" typeahead-on-sel ...

javascriptangularjsangular-ui-bootstrap

What advantages does declaring a backing model "class" that closely resembles the GraphQL "Type" bring when using GraphQL?

I appreciate the Universal Relay Boilerplate for its meticulous organization and thoughtful structure compared to other boilerplates. It seems like they really put a lot of effort into ensuring everything is well-planned from the start, which is not always ...

javascriptreactjsgraphqlrelay

Problem encountered when trying to generate a geometrical figure using inputs for a specified row, column, and designated character to populate the shape

I need to take an integer input for the number of rows and columns, followed by a String input for the character. Let's say the user inputs 5 for rows, 2 for columns, and "@" as the character, then the expected output should be: @@ @@ @@ @@ @@ I ...

javaarraysloopsjava.util.scannershapes

Refreshing the page reveals the complete local storage object

I've successfully created a todo list using Vanilla Javascript along with local storage. The todo list includes the following key-value pairs: key: todolist value: [[\"id:0\",\"title:buy groceries\",\"done:false\"], [&b ...

javascriptlocal-storage

Assigning a value to a variable from a method in Vue: a step-by-step guide

I'm having trouble assigning values from a method to variables in HTML. Here's what I have in my code: <b-card-text>X position {{xpos}}</b-card-text> <b-card-text>Y position {{ypos}}</b-card-text> I would like to assign v ...

javascriptvue.js

How can we effectively share code between server-side and client-side in Isomorphic ReactJS applications?

For a small test, I am using express.js and react.js. Below you can find my react code: views/Todo.jsx, var React = require('react'); var TodoApp = React.createClass({ getInitialState: function() { return { counter: 0 ...

javascriptnode.jsexpressreactjsisomorphic

Steps to deactivate an HTML submission button once it has been clicked

I have encountered an issue while working on a signup page using PHP and JavaScript. After the user clicks the "submit" button, the page begins to load before redirecting. If the user clicks "submit" again, an error occurs because the data has already been ...

javascriptphphtmlvalidation

Tips for dynamically populating nested collections in Firestore continuously

I'm currently working on a React/Redux application that utilizes Firebase Auth/Firestore to manage a user's gym workout routines. To handle data submission, I am using Redux Form alongside the following data structure I aim to achieve in Firestor ...

javascriptreactjsfirebasereact-reduxgoogle-cloud-firestore

What is the method for extracting information from a JSON column in SQL Server using the openjson function?

Declare @ResponseText nvarchar(4000) set @responseText ='{ "submissions": [ { "xml_id":"id_x5d94851726b470.68571510", "fields": [ {"fieldvalue":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

arraysjsonsql-serveropen-jsonsql-server-json

FireFox is experiencing issues with jQuery AJAX functionality

I'm encountering an issue with my AJAX request on my website (not crossdomain). Here is the code that I am currently using: $("#submit").click(function(e){ var nameW = $("#name").val(); var teamValue = $("#team").val(); $.aja ...

javascriptjqueryajaxfirefox

"Utilize browser detection to direct users to appropriate pages - whether by using htaccess or another method

I'm in the process of creating a website and I've noticed that it looks quite bad on Firefox and IE. I was wondering if you could help me figure out how to redirect users to different pages based on the browser they are using. Since I am not an ...

javascriptphp.htaccesshttp-redirect

Send only the modified form fields when making an AJAX PUT request to the REST API

I need to update my data using an AJAX request triggered by clicking the Save button on a form with multiple fields. Currently, the update only works when all fields are filled out because I'm passing $('#field').val(). But what if I only wa ...

javascriptjqueryhtmlajax

What is the process for defining the value in a select query?

http://jsfiddle.net/WcJbu/ I would like the favoriteThing selector to update with the current selection when choosing a person. <div ng-controller='MyController'> <select ng-model='data.selectedPerson' ng-options='pe ...

javascriptangularjs

showing a pop-up message when a specific javascript function is triggered

Here is a unique code snippet showcasing a customized dialog box created with HTML, CSS, and JavaScript. The dialog box is displayed when a button is clicked. <!DOCTYPE html> <html> <head> <style> /* Custom Modal Styles */ .modal { ...

javascripthtmlformspopuponsubmit