Exploring nested objects within Stylus

My build script compiles my stylus code and includes some data.

stylus(stylFile)
  .set('filename', 'index.css')
  .define('data', require('./data.json'))
  .render(...)

The data.json file contains groups with nested objects representing items.

{
  "group1": {
    "item1": {
      "width": 1
    },
    "item2": {
      "width": 2
    }
  },
  "group2": {
    "item3": {
      "width": 3
    }
  }
}

I want to loop through the groups and their respective items in my Stylus file like this:

for group, items in data
  #{group}
    for id, item in items
      #{id}
        width item.width

The expected output should be:

#group1 #item1 {
  width: 1;
}
#group1 #item2 {
  width: 2;
}
#group2 #item3 {
  width: 3;
}

However, I encounter an error which says:

ParseError: index.css:118:1
   114|   #{group}
   115|     for id, item in items
   116|       #{id}
   117|         width item.width
   118| 
--------^

expected "indent", got "outdent"

Answer №1

Figuring out how to extract the json in stylus may be a challenge, but using hash objects opens up possibilities:

STYLUS

data={
  "group1": {
    "item1": {
      "width": 1
    },
    "item2": {
      "width": 2
    }
  },
  "group2": {
    "item3": {
      "width": 3
    }
  }
}

for group in data
  #{group}
    items = data[group]
    for item in items
      #{item}
        for property, value in items[item]
          {property} value

OUTPUT

#group1 #item1 {
  width: 1;
}
#group1 #item2 {
  width: 2;
}
#group2 #item3 {
  width: 3;
}

UPDATE

If you're still struggling with getting the json from a stylus file, consider converting it into a hash object first:

data = json('data.json', { hash: true })

for group in data
  #{group}
    items = data[group]
    for item in items
      #{item}
        for property, value in items[item]
          {property} value

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

What could be the reason for the content of my navBar not showing up?

Using Bootstrap and additional CSS for styling has been working well, except for the issue with the Dropdown Menu not displaying its content on hover. Within the head tag, the following scripts are included: <!--Jquery--> <script type="text ...

Getting the highest level object in a nested Angular component structure

Currently, I am in the process of developing a query builder using Angular that bears resemblance to the JQuery builder. However, I have encountered an issue related to emitting the data. Whenever I click on the addGroup or addRule buttons, a new group is ...

Obtaining a string from the String prototype can be achieved by using

My goal is to create a custom log method for the String object that will print out the actual string value, but I'm facing some difficulties in getting it to work correctly. String.prototype.log = function() { console.log(this.valueOf()); } &apos ...

Tips for creating spacing between cards using Bootstrap

I'm having trouble organizing a row of 8 cards into a single line. I set a margin of 2 columns on the left side and each card size to 1, totaling 10. However, my row is all messed up. https://i.sstatic.net/TQOMR.png Here is my current code for the bo ...

Learn how to customize app.set() in Express.js to ensure that res.json serializes Buffers with base58 encoding, instead of the default base64 encoding

Is there a way to automatically use base58 encoding when calling res.json on all routes, instead of having to manually encode each route with const idEncoded = bs58.encode(id);? I attempted the following approach: const replacerFunction = (key: any, value ...

React Hook Form: When Submitting, Transform Date Object into String Date within an Array

Below is the data I am working with: { status: "Reserved", label: "Note", title: "Login Fragment - Navigation component With Coroutine", shareWith: "", notification_method: "Every Morning", notification_method_specific_time: Sat ...

Selenium - Tips for entering text in a dynamically generated text field using Javascript!

I'm fairly new to the world of web scraping and browser automation, so any guidance would be greatly appreciated! Using Python's Selenium package, my objective is: Navigate to Login using the provided username & password Complete my order thr ...

Is there a way to refresh a webpage without reloading by using Ajax in conjunction with Django Rest Framework?

I am currently working on a Django project where I need to develop a page that uploads real-time data without refreshing the entire page. This data is fetched from a database, so I have set up an API endpoint using Django Rest Framework. However, I am uns ...

Is there a way to retrieve information from an external URL in JSON format and display it using JavaScript on a separate HTML webpage?

I'm trying to display the value TotalPostNotificationCount from a JSON file in an external HTML using either JavaScript or PHP. The JSON data is as follows: { "DayPostCount": 1, "TotalPostNotificationCount": 7381 } This data can be found at t ...

If the span id includes PHP data that contains a certain phrase

Hey there, it's my first time posting and I'm in a bit of a bind with this script... Let me give you some background information first I am trying to create a click function for a register button that will check the span id (e.g. $("#username_r ...

Adjust the size of bootstrap card titles to match up with the image on the page

I am facing an issue where the title of the second card is pushing the image down. Is there a way to dynamically resize the card title to align all the images properly? Any help would be appreciated. https://i.sstatic.net/PRRHl.png Bootstrap Card ...

Difficulty of combining forEach with findById in mongoose

I need to create a Node route that adds properties to objects and pushes them onto an array declared outside a forEach loop. I have noticed that while the array appears to be filled with data when I log it within the loop, it somehow becomes empty when I r ...

Adjusting the range input alters color progressively

I am trying to create a range input with a dynamic background color that changes as the slider is moved. Currently, the background is blue but I want it to start as red and transition to yellow and then green as the slider moves to the right. Does anyone ...

How can you determine if a DIV element is within view in HTML (without being overflowed)?

Is there a way to determine if a DIV is within its container and therefore visible? In this scenario, the active button (highlighted) can be seen because it is contained within the boundaries: However, in this case: The active button cannot be viewed as ...

Tips for creating multiple files using nodejs and express

I am currently working on developing a personalized code editor that consists of 3 textareas: html, css, and javascript. The objective is to save the data from each textarea into individual files. With the help of express and nodejs, I have successfully m ...

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

How to upload images with React and Node.js

Whenever I upload an image using Postman, the API functions properly and successfully uploads the image. However, when attempting to send data from the front-end (React) to the backend (Node.js), I encounter this error: Cannot read property 'path&apos ...

NodeJS causes a corrupted zip file when attempting to copy an Excel document from Azure Data Lake Storage

I am currently working through this particular tutorial to extract a file from Azure Data Lake Storage, save it temporarily on my Azure Function, carry out some operations within the file (which happens to be in .xlsx format), and other tasks that are not ...

Tips for securely protecting database information in a React application

My virtual hosting server has the capability to handle some static HTML files: +-- public_ftp +-- temp +-- logs +-- mail ... +-- public_html +-- www +-- index.html +-- blog +-- index.html The www folder is responsible for managing ...

Obtain HTML controls in the code-behind of an ASP.NET application

Is it possible to access HTML changes made with JavaScript in ASP.NET code behind? I came across some dhtml "drag and drop" code online (), but I'm struggling to access the updated controls in my code behind after moving items between lists. I attem ...