A guide on showcasing specific data within ng-repeat by referencing another property in JSON object

After retrieving a JSON file using $http(), the structure looks something like this:

[ {
    "sno": "3",
  "eventname": "hockey",
  "event-type": "sports",
  "A-team": "mme",
  "B-team": "eee",
  "Gender": "male",
  "time": "2017-11-24 00:00:00",
  "isresult": "0",
  "result": "",
  "match-type": "semi",
  "venue": "downs"
}]

I am trying to figure out how to display item.result as N/A when item.isresult==0 and as a string when item.isresult==1. Any suggestions on how to achieve this?

javascriptangularjsjson

Answer №1

Opt for ng-if

<div ng-if="item[0].isresult ==='0'">

Answer №2

Implement ng-show

<div ng-show="item[0].isresult ==='0'">

Answer №3

Let's pretend your list is called "items -

<div ng-repeat="item in items track by $index">
    <div ng-show="item.isresult === '0'"> N/A </div>
    <div ng-hide="!item.isresult === '0'"> {{dynamicString}} </div>
</div>

It seems like the string you want to display is a variable you're holding. It might be better to use boolean values for item.isresult instead of strings or numbers to prevent any potential errors.

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

Learn how to collapse a list by clicking outside of it on the document with the following code: $(document).on("click"

I want to create a collapsible/expandable menu for my website. I had a version where hovering over a category would expand the subcategory, but what I really need is for the subcategories to expand when I click on a category and remain expanded until I cli ...

javascripthtmlcss

What are the various undisclosed schema types in A-Frame?

I've been exploring different examples of property types in the official documentation and various Github repositories (though now I can't remember which ones). The latter introduced me to unique properties like "min" and "max" for numbers, as we ...

javascriptschemamozillaaframe

Leveraging HTTP/2 in conjunction with angularJS

As I was exploring ways to improve the performance of my web application, I came across HTTP/2. After learning about its features that can enhance website speed, I decided to implement it. Upon upgrading my browser to the latest version to enable HTTP/2 s ...

javascriptangularjshttp2web-performance

Is it possible to dynamically set the maximumSelectionLength in a select2 dropdown?

In my HTML, I have two select elements. One is for multiple selection of items in a dropdown and the other is for adding tags. If the number of selected items is 3, then users should only be allowed to add 3 tags - no more and no less. $(".js-example-b ...

javascriptjqueryhtmlselectjquery-select2

Guide to transferring filtered data to the controller

As I work on designing a user interface for managing project applications, one of the key functionalities is the ability to filter applications by their type. Within the UI, there is a prominent button labeled select ALL which, when clicked, is meant to se ...

javascriptangularjs

Warning message appears if date input field is left empty upon submission

After implementing angular-ui/ui-date for the date input and angular-auto-validate for form validation, I encountered an issue where the date input field shows a required message before submission. It seems that the problem may be caused by the built-in va ...

jqueryangularjsformsdate

The input '{ data: InvitedUser[]; "": any; }' does not match the expected type 'Element'

I'm currently facing a typescript dilemma that requires some assistance. In my project, I have a parent component that passes an array of results to a child component for mapping and displaying the information. Parent Component: import { Table } fr ...

javascriptreactjstypescriptsemantic-ui-react

Error occurs in ReactJS App when the state is updated in Redux only after dispatching the same action twice

Check out the following code snippet: ChartActions.js import * as types from './ChartTypes.js'; export function chartData(check){ return { type: types.CHART_DATA,check }; } ChartTypes.js export const CHART_DATA = 'CHART_DATA ...

javascriptreactjsreduxreact-redux

As the height is expanded, the background color gradually infiltrates the body of the page

I am currently working on an angular application that utilizes angular-pdf. The controller and view function perfectly, and the PDF is displayed correctly, except for one issue. The height of the PDF exceeds the min-height of the module, causing it to expa ...

javascripthtmlcssangularjs

What specific files from the Kendo core are required for utilizing Mobile and Angular functionalities?

After browsing through similar questions, I couldn't find a solution. Currently, I am experimenting with Kendo (open source core for now) in a Visual Studio Cordova project. Initially, disregarding Cordova, I am focusing on setting up a basic view wit ...

javascriptangularjscordovakendo-uikendo-mobile

Error: Provider not recognized

Currently, I am in the process of creating a basic chat application using express.js, socket.io, and angular. The functionality seems to be working properly. However, I am encountering an issue where the socket message event is not synchronizing and displa ...

javascriptangularjs

Steps for inserting API data into a MySQL database

I am currently working on a project and need help figuring out how to integrate my API results into MySQL. You can find the results on this page. Below is the code snippet from the page: <?php ///PLOT PROJECT USER REQUEST //FUNCTION TO DEBUG IN ...

phpmysqlarraysjsonapi

Hide the HTML DIV without altering the position of the current div

My goal is to conceal elements 1, 3 and 2 & 4 without changing their position. div{ width: 10%; float: left; } <div style="background-color: blue"><p>1</p></div> <div style="background-color: yellow"><p>2</ ...

javascripthtmljquerycssbootstrap-5

I keep receiving the error message "URI is null" when using catch() with my HTTPS request

I'm currently working on implementing an HTTPS request to retrieve a JSON object from the following URI: "https://api.agify.io/?name=.". My goal is to provide specific criteria for which name I would like to gather information and determine the averag ...

javajsonexceptionhttpsuri

What are the steps for utilizing JQuery to send JSON data?

I need to send Json data to a web service located on the same server, but I am unsure of how to achieve this using JQuery. Here is the code I have attempted: $.ajax({ type: 'POST', url: '/form/', data: {"name":"jonas"}, ...

jqueryjsonajaxhttp-post

Error: Trying to use Router without providing a middleware function. Please make sure to pass a valid middleware function while using Router

While working on my express application with MongoJS, I encountered an issue where despite returning a function, it was showing that an object has been returned instead. To address this, I made sure to include module.exports=router in my JavaScript file. H ...

javascriptnode.jsexpressmongojs

Tips for integrating a "datetime" picker in your AngularJS application

Currently working on an AngularJS application. The single page has a date input that needs to be added. Date Input <input type="date" ng-model="InputDate" /> Any suggestions on how to accomplish this task? ...

angularjshtmlinputtwitter-bootstrap-3datetimepicker

What is the best way to create a time delay between two consecutive desktop screenshot captures?

screenshot-desktop is a unique npm API that captures desktop screenshots and saves them upon request. However, I encounter the need to call the function three times with a 5-second delay between each call. Since this API works on promises, the calls are e ...

javascriptnode.jsnpm

Tips for implementing lazy loading for a section of a template in Angular 2

I have an Angular 2 component that has several sub-components within it. Some of these sub-components are expensive to load and may not always be necessary, especially if the user doesn't scroll far enough down the page. Although I am familiar with l ...

javascriptangulartypescriptlazy-loadingviewport

Learn how to use the Firebase Adapter for Next Auth to easily sign in using your email and password

I am currently using next-auth along with a Firebase adapter for authentication, but I am uncertain about the correct way to sign in users. I do not want to utilize my Google account for signing in; instead, I have user accounts within a Firebase project a ...

javascriptreactjsnext.jsfirebase-authenticationnext-auth