Tips on utilizing ng-switch-when to handle non-empty JSON data?

I am relatively new to using AngularJS and I have a JSON structure within my application. I am looking to implement ng-switch to display content from this JSON when it is not empty (as it is an array). The JSON I am referring to is quite large and I am specifically interested in one section of it. Is it achievable with ng-switch alone, or do I need to configure some scope parameters in my controller? Are there other approaches that could also be effective but that I may be unaware of?

JSON

...,
"venues": [{"vid":"12",...},{"vid":"13",},{"vid":"14",..}],...

Markup

<div ng-switch on="team.venues" >
    <ul ng-switch-when="venue is not empty">
        <li ng-repeat="venue in team.venues">
            {{venue.vid}}
        </li>
    </ul>
    <p ng-s­wit­ch-­def­ault>no venue</p>
</div>
javascriptangularjsng-switchangularjs-ng-switch

Answer №1

indeed, implement it in this manner

<div ng-switch on="team.venues.length > 0" >
            <ul ng-switch-when="true">
                <li ng-repeat="venue in team.venues">
                 {{venue.vid}}
                </li>
            </ul>
            <p ng-s­wit­ch-­def­ault>no venue</p>
</div>

this code snippet displays the <ul ng-switch-when="true"> when the condition team.venues.length > 0 evaluates to true.

refer to the official documentation for more information

<ANY ng-switch="expression">
    <ANY ng-switch-when="matchValue1">...</ANY>
    <ANY ng-switch-when="matchValue2">...</ANY>
    <ANY ng-switch-default>...</ANY>
</ANY>

check out this live demonstration

Answer №2

If you want to display a list of team venues, you can use the following direct expression: 

ng-switch-when="team.venues.length > 0 && team.venues"
.

Code Example

<div ng-switch on="team.venues">
     <ul ng-switch-when="team.venues.length > 0 && team.venues">
       <li ng-repeat="venue in team.venues">
          {{venue.vid}}
       </li>
     </ul>
     <p ng-s­wit­ch-­def­ault>no venue</p>
</div>

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

How to eliminate undefined values from a dropdown selection in AngularJS

Blockquote When choosing a material from the column, the first option is showing as undefined. How can I remove undefined from the drop-down list? What changes need to be made in the HTML/JSON data for this to work properly? Blockquote var app = ang ...

javascriptangularjs

Perform a Fetch API request for every element in a Jinja2 loop

I've hit a roadblock with my personal project involving making Fetch API calls to retrieve the audio source for a list of HTML audio tags. When I trigger the fetch call by clicking on a track, it always calls /play_track/1/ and adds the audio player ...

javascriptpythonflaskfetchjinja2

Implementing a universal timer for tmi.js and discord.js integration

I am currently working on a Discord bot that monitors multiple Twitch chats for commands and executes them on Discord using tmi.js and discord.js. Everything is functioning as expected, but I am facing an issue with implementing a global cooldown on the ...

javascriptnode.jsdiscord.jstwitch

Node.js (Express), passport.js, mongoose.js, and Android app all have in common the HTTP Error 307 - Temporary redirect

I am currently constructing a REST Api using Node.js (Express.js and Moongose.js). I have a single post route that takes JSON data and redirects it to the signup page (/app/signup) if the user is a first-time user (not found in the database), or to the log ...

javascriptandroidnode.jsrestexpress

Modifying a Field's Value by Referring to a Different Field

I am working on developing a form that includes a dropdown menu for changing the aircraft type. Additionally, I want to incorporate another field named "Registrations" which will automatically update the available registration options based on the selected ...

javascriptphphtmlforms

I am facing an issue with submitting a form using jQuery POST and php serialization

I am struggling to send form data using jQuery. The data seems to be stuck in a loop where it keeps requesting the page ./?page=game&mode=search&type=private with the GET function and does not reach the server. Can someone help me identify what I m ...

javascriptphpjquery

Utilizing jQuery.post to generate a dynamic dropdown menu

I recently designed a dropdown list that functions well on a standalone page. However, I encountered an issue when attempting to display it in a table on another page using jQuery.post(). The contents appear to overflow from the dropdown list. The jQuery ...

phpjavascriptjquery

Encounter an error parsing the package.json file. Confirmed that it is valid JSON

As I embark on creating my very first yeoman generator, I have encountered an issue when running yo to initiate the project. The error message I am receiving is as follows: npm ERR! install Couldn't read dependencies npm ERR! Darwin 14.0.0 npm ERR! a ...

javascriptjsonnode.jsnpmpackage.json

Tips for Isolating and Manipulating a Single Element in Array.map() with REACT.JS

Is there a way to change the style of a specific element in an array without affecting others when a button is clicked? I've been struggling with this because every time I try, it ends up changing all elements instead of just the one that was clicked. ...

javascriptreactjsjsx

Ways to quickly terminate a pipeline in a JavaScript transformation

Issue: I am facing a challenge with handling large files (>10GB). At times, I need to process the entire file while other times I only need to sample a few lines. The processing mechanism involves a pipeline: pipeline( inStream, ...

javascriptstreamtransformpipeline

Leveraging ThemeProvider Parameters with Global Styled-Components

When working with styled-components, how can I access the props of the ThemeProvider in the context of global.js? For instance, in my theme.js file, I have ${props => props.theme.fonts.fontSize} set to a default font size of 16px. const theme = { ...

javascriptreactjsstyled-components

I would like to know more about the concept of getters and setters and how they can be effectively utilized

I've been struggling to understand the concept of getters and setters. Despite reading articles like JavaScript Getters and Setters and Defining Getters and Setters, I just can't seem to grasp it. Could someone please explain: The purpose of g ...

javascriptsettergetter

A guide on customizing the appearance of individual items in a vue v-for loop based on specific conditions

I am currently developing a multiple choice quiz game and I want the selected answer by the user to change color, either red or green, depending on its correctness. To achieve this, I have created a variable called selected that correctly updates when the ...

javascriptcssvue.jsvuejs3v-for

Issue with Jquery animation

I'm facing a strange issue. I've created a jQuery function that animates the result bars of a poll. function displayResults() { $(".q_answers1 div").each(function(){ var percentage = $(this).next().text(); $(this).css({widt ...

javascriptjqueryanimation

Using JavaScript to detect the Facebook like button on a webpage

I am currently developing an application for Facebook using HTML and Javascript. My goal is to be able to detect when a user clicks the "Like" button on my company's Facebook page without needing to embed a separate "Like" button within my app itself. ...

javascriptfacebookfacebook-like

Error-free ngClick doesn't trigger AngularJS controller method

I am struggling to trigger the removePlayer(playerId) method upon clicking a button. However, it seems that the method is not being called, as I have placed a console.log() statement at the top and the console remains empty. This situation has left me puz ...

javascriptangularjs

The dynamic page fails to export with a static export in NextJS, resulting in an output error: "

I'm struggling to export a route in my NextJS 14 project. I've set the output to export and all routes are exporting correctly except for the dynamic ones. The folder for the dynamic route is not showing up in the output folder The version of Ne ...

javascriptreactjsnext.jsbuildexport

The JSP AJAX response comes back empty

I am encountering an issue where I am using JQuery Ajax to call a REST API in JSP, but it keeps returning null no matter how I try. Strangely enough, the same code works when used in HTML. I have been searching online for a solution but haven't found ...

javascriptjqueryajaxjspnull

Using Bootstrap 5 to display a modal using JavaScript

Creating a sleek gallery using bootstrap 5, and curious about how to activate a bootstrap modal without including "data-bs-..." in the HTML (to prevent repeating those data- attributes multiple times). I have successfully written a functioning JavaScript ...

javascriptfunctionbootstrap-modalshowbootstrap-5

The webpage displays the element as <span class="icon">&#xe80d;</span> instead of rendering it properly

In my ReactJS project, I have created a component called Menu1item: class Menu1item extends React.Component{ render(){ return ( <div> {this.props.glyph}{this.props.value} </div> ) ...

javascripthtmlreactjs