Exploring the Depths of Dom-Repeat in Polymer 1.0: Harnessing the Power of Infinite

Here is the JSON object I am working with:

    categoryList = [{
    "title": "Computers",
    "categories": 
    [
      {
        "title": "Laptops",
        "categories": 
        [
          {
            "title": "Ultrabooks",
            "categories": 
            [
              {
                "title": "Lenovo",
                "categories": 
                [
                  {
                    "title": "i5 intel"
                  }
                ]
              }
            ]
          },
          {
            "title": "Dell"
          },
          {
            "title": "Macbooks",
            "categories": 
            [
              {
                "title": "Air"
              }, 
              {
                "title": "Pro"
              }
            ]
          }
        ]
      }, 
      {
        "title": "Desktops"
      }, 
      {
        "title": "Tablets",
        "categories": 
        [
          {
            "title": "Apple"
          }, 
          {
            "title": "Android"
          }
        ]
      }, 
      {
        "title": "Printers"
      }
    ]
  }]

This structured data allows for nested categories which can go on indefinitely. My goal is to display all of these categories, but I am struggling to find a solution.

Currently, my code only displays the first child in each category like so:

<template is="dom-repeat" items="{{categoryList}}" as="category">  
  <template is="dom-if" if="{{_hasData(category.categories)}}">
      <div>{{category.title}}</div>
      <template is="dom-repeat" items="{{category.categories}}" as="item">
         <div>{{item.title}}</div>
      </template>
  </template>
</template>

Answer №1

You have the option to utilize recursive code in this scenario. Check out this plunker for reference.

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="infinite-repeat">
  <template>
    <template is="dom-repeat" items={{categories}} as="category">
      <div>{{category.title}}</div>
      <template is="dom-repeat" items="{{category.categories}}" as="item">
        <div>{{item.title}}</div>
        <template is="dom-if" if="{{_hasData(item.categories)}}">
          <infinite-repeat categories={{item.categories}}></infinite-repeat>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'infinite-repeat',
    properties: {
      categories: {
        type: Array,
        value: function() {
          return [{
            "title": "Computers",
            "categories": [{
              "title": "Laptops",
              "categories": [{
                "title": "Ultrabooks",
                "categories": [{
                  "title": "Lenovo",
                  "categories": [{
                    "title": "i5 intel"
                  }]
                }]
              }, {
                "title": "Dell"
              }, {
                "title": "Macbooks",
                "categories": [{
                  "title": "Air"
                }, {
                  "title": "Pro"
                }]
              }]
            }, {
              "title": "Desktops"
            }, {
              "title": "Tablets",
              "categories": [{
                "title": "Apple"
              }, {
                "title": "Android"
              }]
            }, {
              "title": "Printers"
            }]
          }];
        }
      }
    },
    _hasData: function(item) {
      return item && item.length > 0;
    }
  })
</script>

<infinite-repeat></infinite-repeat>

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 is the best way to trigger a jQuery function when an option is selected from a Select2 dropdown menu?

I have implemented Select2 for custom dropdown styling. The options are structured like this: <option value="001,100">Option 001</option> <option value="002,200">Option 002</option> <option value="003,300">Option 003</opti ...

Tips for Showing Websocket Response On Web Browser Using Node.js

Just starting out with NodeJS and here's my code snippet: const webSocket= require('ws'); const express = require('express'); const app=express(); Var url = "wss://stream.binance.com:9443/BTCUSDT@trade`" const ws = new webS ...

Java code to extract and delete a section of a website on a webpage

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fwebview, container, false); webView = (WebView) view.findViewById(R.id.webView); String url = ge ...

How do I link JavaScript with a database in Django?

I am currently working on a project using Django and I'm looking to integrate js into it. While I don't have much experience with js, I am interested in learning how to manipulate the database using js. Specifically, I want to implement a delete ...

"Launching an application with a mailto function in a href link through PHP: A step-by-step guide

Is it possible to prompt the user to choose a launcher application every time they click on a mailto link without requiring browser permissions using PHP? I want the user to always have the option to select a launcher when clicking on the link. How can I a ...

Zoom-to-fit functionality in Three.js with spacing adjustment

I am currently working on developing a zoom-to-fit function that can accurately adjust a list of points to fit within a specified drawing area, while also allowing for customizable offsets on all sides of the image. In essence, I aim to zoom-to-fit within ...

Generate a revised object from a function and return it to the caller

What is the most efficient way to update and return a new object from a function? I came up with this function: export const addItemToCart = (currentCart, item) => { const { name, ...otherProps } = item; // if the item is already in the cart if ...

What could be the issue with my interactive dropdown menu?

I am currently experiencing an issue with a drop down list that is supposed to fetch records from a column in another table, but no records are appearing. Additionally, I would like to add an option in the drop down list labeled "others" for users to inp ...

The search function in Typeahead is not activating the API request while typing

Having some trouble implementing a typeahead search feature in my nodejs application with mysql. I can't seem to figure out what's wrong with my code. When I manually access http://localhost:5000/search?key=s, I'm able to see the results an ...

Having difficulties importing Container from NextUi

Hey everyone, I'm relatively new to nodejs and I've run into an issue when trying to utilize components from NextUI. I followed the installation instructions from here, but I'm getting an error that says Module'@nextui-org/react' h ...

Is it possible to transform a JSON object into a JAXB object?

I have been dealing with JAXB objects and now I need to switch to using JSON instead of XML. Can anyone provide guidance on how to go about this? I don't want to completely replace the codebase with JSON objects. Is there a way to convert JSON to JAX ...

Issue with implementing MUI Grid within a dialog across various screen sizes

While working with a MUI dialog and MUI grid, I encountered an issue. The code I am using is directly from the website, with only minor modifications to the dialog function names and the box wrapping the dialog. Despite changing the size of the dialog, t ...

Access a component from the @ViewChild without resorting to nativeElement

Is there a way to access the underlying div element using a @ViewChild? I have attempted the following approaches without success: ElementRef.prototype.nativeElement -- returns ElementRef HTMLDivElement -- returns undefined ElementRef -- returns ElementRe ...

Exploring the benefits of event subscription nesting

One feature I'm currently utilizing is the Angular dragula drag and drop functionality, which enables me to effortlessly move around Bootstrap cards within the view. When an item is "dropped," it triggers the this.dragulaService.drop.subscribe() funct ...

New Solution for Direct Java Raw Printing in Chrome Browser Post NPAPI Discontinuation

It's common knowledge that NPAPI will soon be eliminated from Chrome. Is there a substitute for the Jzebra/QZ Java plugin that allows for raw printing (sending raw ESC/P commands) to POS printers? Are there any Chrome APIs (based on HTML5 and Javasc ...

Utilizing the JsonMediaTypeFormatter for JSON data serialization

My formatter configuration includes the following settings: JsonMediaTypeFormatter formatter = new JsonMediaTypeFormatter(); formatter.SerializerSettings.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore; formatter.SerializerSettings.Formatt ...

Having trouble accessing the JSON result with Jquery

My controller has an action that returns JSON results, which I have tested and confirmed to be working properly. public JsonResult GetProductsByDepList(int id) { JsonResult jr = new JsonResult(); var _product = from a in DataContex ...

I'm struggling with developing react applications due to problems with canvas elements

I am currently using an M1 MacBook Pro, with Node version 15.4.1 and npm version 7.0.15. When I ran the command npx create-react-app my-app, it gave me this output: https://i.sstatic.net/OKKnA.jpg I have attempted various solutions but keep encountering ...

<select> dropdown menu for selecting specific files opened by JavaScript

Currently, I am converting CSV files into JSON format and then manipulating them to generate arrays that will be used by jQuery to create a graph. My goal is to implement a dropdown menu that allows the user to choose a specific CSV file for graph creatio ...

How to calculate large integer powers efficiently in JavaScript using the mod

I'm currently on the lookout for a reliable JavaScript algorithm as I attempted to implement one using node.js : function modpow_3(a,n, module){ var u = BigInt('1'); var e = equals(a, u); if( e) return a; if(equalsZero(a)) return a; if(pair ...