Accessing a nested JSON array with duplicated attribute names

Is it feasible to access the values in the 'Roofing Insulation' array using JavaScript, especially when dealing with duplicate attribute names?

I've attempted various syntaxes like productListing['Roofing Insulation']['Roofing Insulation'] but haven't been successful. Despite being aware of the duplication being bad practice, it's the only option I have...

{
  "storeServices":{
     "Local Services":[
        "Rooftop",
        "EPDM",
        "Next-Day Delivery Available"
     ],
     "National Services":[
        "Covered",
        "Window",
        "Job Site Signs"
     ]
  },
  "productListing":{
     "Roofing Insulation":{
        "Roofing Insulation":[
           "Celotex",
           "Dow",
           "Foamular",
           "Johns Manville",
           "Pactiv",
           "Tyvek"
        ]
     },
     ...
}
javascriptjson

Answer №1

If you need assistance, please show us what you have attempted and provide your code for reference. In order to access it correctly, make sure to use the following syntax:

obj.productListing['Roofing Insulation']['Roofing Insulation']

Here is a demonstration example for better understanding:

var obj = {
  "storeServices": {
    "Local Services": [
      "Rooftop",
      "EPDM",
      "Next-Day Delivery Available"
    ],
    "National Services": [
      "Covered",
      "Window",
      "Job Site Signs"
    ]
  },
  "productListing": {
    "Roofing Insulation": {
      "Roofing Insulation": [
        "Celotex",
        "Dow",
        "Foamular",
        "Johns Manville",
        "Pactiv",
        "Tyvek"
      ]
    },
    "Other Products": {
      "Other Products": [
        "Caulks/Sealants",
        "Shutters",
        "Tools & Equipment",
        "Engineered Lumber",
        "Roofing & Siding Accessories"
      ]
    },
    "Low Slope Roofing": {
      "Low Slope Roofing": [
        "Johns Manville",
        "Mule-Hide Products",
        "Versico"
      ]
    },
    "Steep Slope Roofing": {
      "Concrete & Clay Roof Tiles": [
        "Vande Hey Raleigh"
      ],
      "Asphalt Shingles": [
        "CertainTeed",
        "GAF",
        "Owens Corning"
      ]
    },
    "Windows & Doors": {
      "Replacement Windows": [
        "Pella"
      ],
      "New Construction Windows": [
        "Pella"
      ],
      "Exterior Doors": [
        "Pella"
      ],
      "Skylights": [
        "Velux"
      ]
    },
    "Siding": {
      "Vinyl Siding": [
        "Mastic Home Exteriors"
      ]
    }
  },
  "branchDetails": {
    "branchNumber": "1"
  }
};

document.getElementById("demo").innerHTML = obj.productListing['Roofing Insulation']['Roofing Insulation'];
<p id="demo"></p>

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 seeing a message in the console that says "Form submission canceled because the form is not connected." Any idea why this is happening?

For the life of me, I can't figure out why this code refuses to run the handleSubmit function. Essentially, the form is supposed to take an input and execute the handleSubmit function upon submission. This function then makes a POST request to an API ...

javascriptnext.js

Use the JavaScript executor to combine a dynamic string

I have a String variable that retrieves IDs from an Excel sheet. String id = formatter.formatCellValue(sheet.getRow(i).getCell(2)); I am trying to dynamically update the ID using JavaScript executor, but it seems that the concatenation is not working cor ...

javascriptjavaselenium

Retrieving individual data elements from an array with the help of the .find() method

I am struggling to display specific details of an object within an array by using .find() method, but I keep receiving undefined as the output. Below is the code snippet where I attempted this, when I log the ID, I can see a value, however, when I try to ...

javascriptreactjsarraysecmascript-6

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ). However, there may not be an element with this class in the dom yet. My goal is to retrie ...

javascriptcss

What is the best way to initiate WebXR from an iframe in a Next.js environment?

I am currently working on a Next.js app: https://codesandbox.io/s/next-js-forked-6fgnr7?file=/index.tsx I have implemented the functionality for it to open WebXR on Android Chrome when clicking on the AR button located at the bottom left ("in AR betracht ...

javascriptnext.jsiframewebxrmodel-viewer

Difficulty with the Testimonials Carousel Javascript

I'm currently attempting to create a Testimonials slider using JavaScript, but I'm facing an issue with the slider not transitioning to the next slide. It functions correctly when on the first or last slide, but fails to move otherwise. I've ...

javascripthtmlcssslidertestimonials

What should be done with all the tags that have the specified attribute set to 'checked = false'?

Add tags using input type = "radio" along with the data-group attribute: <input type="radio" id="id1" data-group="group1"> <input type="radio" id="id2" data-group="group1"><br> <input type="radio" id="id3" data-group="group2"> < ...

javascriptjqueryhtml

Updating a route in Next.js? Make sure to remove the classList as you

Looking to remove a specific class whenever the route changes in Next.js, I've attempted the following approach: React.useEffect(() => { const activatedLink = router.query.tags const classActivated = document.querySelector('.'+activated ...

javascriptreactjsnext.js

Uncover the hidden treasures within an array of objects using Postman

My goal is to extract the Id value from an array of objects using Postman and then store it as an environment variable. I have a script that works with JSON responses that are objects, but not with arrays of objects (my array only has one object). var dat ...

jsonenvironment-variablespostman

Combining JSON results for various dataframes generated by pd.to_json()

I am looking to merge multiple dataframes and save them into a single JSON file. import json import pandas as pd df1 = pd.DataFrame({'A': [1, 2, 3], 'B': [10, 11, 12]}) df2 = pd.DataFrame({'C': [1, 2, 3], 'D': [10 ...

pythonjsonpandas

Choose to either check or uncheck boxes using ReactJS

After successfully creating a function to select either single or multiple boxes, I encountered an issue with the "Select all" feature. Any suggestions on how to resolve this? (I'm utilizing the material-ui library for my checkboxes, which are essenti ...

javascriptreactjsmaterial-ui

Create a TypeScript arrow function and set it as the return value

Looking to create a TypeScript Declaration for ReactMeteorData.jsx, which consists of the following exporting functionality: export default function connect(options) { let expandedOptions = options; if (typeof options === 'function') { e ...

javascripttypescriptmeteorreturn-valuearrow-functions

Error encountered: Attempting to upgrade Intel App Framework 2.1 resulted in TypeError: o.promise is not a function

During the process of updating Intel App Framework from version 2.0 to 2.1, I encountered a jQuery error stating 'TypeError: o.promise is not a function in jQuery'. The current setup includes jq.appframework.min.js alongside jquery-1.11.0.min.js. ...

javascriptjqueryintelappframework

MongoDB consistently returns a fewer number of values than the expected count

Currently, I am in the process of developing a blog project that requires implementing a "liking" feature on my blog website. Although I have successfully added the liking functionality, there seems to be an issue when testing it with MongoDB. The problem ...

javascriptreactjsdatabasemongodb

Using THREE.js to cast rays from a secondary camera onto the scene

I've been attempting to raycast the mouse from my camera in order to trigger hover and click events on meshes within my scene. The issue I'm facing is that my camera is currently a child object of another mesh (to facilitate easier camera moveme ...

javascriptcamerathree.jsraycasting

exploring methods to prevent flash of unstyled content (fouc)

Looking for a way to control CSS with a cookie: Want the user's style choice to stick until they change it or the cookie expires Avoid any default styling issues when the user returns Avoid using jquery, libraries, or frameworks Need compatibility w ...

javascriptcookiesdhtmlapi-designfouc

Unable to run a query in PHP that executes successfully in phpMyAdmin

I'm currently attempting to remove rows from a table using the following code: $query = "Delete from usertour where tourID = $idnum and name LIKE '%$session%' "; However, even when the idnum and session are correct, the row is not being ...

javascriptphpmysqlsqlphpmyadmin

Once map layers have been loaded initially, they will not render again

I'm currently incorporating Mapbox GL into my Vue project using VueMapbox (0.4.1). <template> <MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle" :repaint="true" @load="onMapLoaded ...

javascriptvue.jsmapboxmapbox-gl

The challenge of customizing card styling in conditional rendering with React Native

There are two primary components in this setup: homeScreen.js (the parent component) Card.js (the child component) The card component is rendered when the search is not toggled, and all necessary data is passed down as props without any rendering is ...

javascriptreactjsreact-nativereact-propsinline-styles

Switch up the data format of a JSON file that is brought into TypeScript

When bringing in a JSON file into a TypeScript project with the resolveJsonModule option activated, the TypeScript compiler can automatically determine the type of the imported JSON file. However, I find this type to be too specific and I would like to rep ...

jsontypescriptimport