Displaying a JSON array based on certain criteria using ng-repeat

Hey there, I've got a JSON array that looks like this:

var homes = [
    {

        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "NoteNumber": "162500"
    }, {

        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "NoteNumber": "319250"
    }, {

        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "NoteNumber": "null"
    }
];

I'm currently displaying them in a div using ng-repeat

<div ng-repeat="name in homes">
{{name.city}}
</div>

In my HTML, I have a select tag with options for both notenumber and null

Can someone assist me with how to only display cities with a notenumber when the user selects notenumber, and only show cities with a null note number when null is selected?

javascriptjsonangularjs

Answer №1

Utilize a scope variable that is linked to your SELECT element to filter your array

<select ng-model="selectedNoteNumber">INSERT YOUR OPTIONS HERE</select>

<div ng-repeat="name in homes | filter: { 'NoteNumber': selectedNoteNumber }">
    {{name.city}}
</div>

Answer №2

Give this a shot

<select ng-model="SelectedNote" ng-options="note.id as note.name for note in notes"> </select>

<div ng-repeat="item in notes">
    <span ng-if="SelectedNote !== 'null'">{{item.description}}</span>
</div>

Hopefully, you find this useful

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

Revise the text while keeping the column content unchanged

Is it possible to change the text in a column without affecting the image using Jquery? Can this be achieved solely with Jquery without any modifications to the HTML code? Check out the demo $(".jsNoWrap").text("Change text"); <script src="https://a ...

javascriptjquery

Retrieve all findings related to an ongoing loop update issue within react-table

Check out this Playground Sandbox where custom hooks for react-table have been set up to allow for customized search and row selection features. However, after selecting a single row, some unexpected behavior occurs, including the select All option not f ...

javascriptreactjsreact-table

How do I verify response values in Postman tests when the input parameter may be empty and can have multiple possible values?

In my program, there is an input parameter known as IsFruit that can have a value of either 0 or 1. If IsFruit is set to 0, the response should return fruits with a FruitsYN value of N. Similarly, if it is set to 1, FruitsYN should be Y. In cases where I ...

javascriptjsonpostmanpostman-collection-runnerpostman-testcase

Error: 'require is not defined' pops up while trying to import into App.js for a React App built with CDN links

My latest project involves a React App that showcases an h1 tag saying "Hello World" on the browser. Rather than utilizing npm, I have opted for CDN links to set up the application. The structure of the App consists of three key files: An index.html file ...

javascripthtmlreactjsbabeljs

Issue with mouseMove function not aligning correctly with object-fit:contain CSS property

My current code allows users to select a color from an image when hovering over the pixel with the mouse. However, I am encountering an issue where the colors do not map correctly when using object-fit: contain for the image. The script seems to be treatin ...

javascripthtmlcssmousemoveobject-fit

Can a Directive be nested within another Directive in AngularJS?

I'm currently working on integrating the drag and drop directive from into another directive within my AngularJS application. angular.module('MyApp') .directive('seconddirective', function ($rootScope, $lvlDraggable) { ret ...

angularjsangularjs-directive

What is the best way to create a reset button for a timing device?

Is there a way to reset the timer when a button is clicked? Having a reset button would allow users to revisit the timer multiple times without it displaying the combined time from previous uses. Check out this code snippet for one of the timers along wit ...

javascripthtmlbuttontimerrestart

javascript display an alert when the page is loaded

My customer wants to display an alert upon visiting a website. The problem is, alerts pause the page loading until the user clicks "Ok," and the client needs the page to continue loading in the background while the alert is visible. We could create a cus ...

javascriptjqueryloadingalert

The function signature '() => void' cannot be assigned to a variable of type 'string'

Encountering an issue in Typescript where I am attempting to comprehend the declaration of src={close} inside ItemProps{}. The error message received reads: Type '() => void' is not assignable to type 'string'. Regrettably, I am ...

javascriptreactjstypescript

Dropdown selection returning the text value instead of the designated value

Is it possible to retrieve the text "Region 1" instead of just the value '1' from a dropdown menu in PHP? <select name = 'region' id = 'region'> <option value = '1'>Region 1</option> <select&g ...

javascriptphphtml

I am unable to reach my pages through their URL directly, I can only access them through links within Next.js

My next JS application runs smoothly during development, but encounters an issue when published online. I can only access the pages through links on the home page that direct to those specific pages. For instance, trying to navigate directly to www.examp ...

javascripturlnext.js

Freezing in IE/Safari due to AJAX jQuery interactions

Feeling frustrated and seeking help. I am currently executing this particular script: <script type="text/javascript" charset="utf-8> jQuery(window).ready(function(){ //alert('running'); var sold = false; var l ...

javascriptajaxjsoninternet-explorersafari

Retrieve the identification number from the code snippet containing the "append(<tr><td="ID">..." template

I have a table that I'm populating with data from a firebase database using the append() function. $("#table_body").append("<tr><td>" + name + "</td>" + "<td>" + brand + "</td>" + ...

javascriptjqueryfirebasedynamicfirebase-realtime-database

Retrieving JSON data from an API's array

Encountering a minor JSON dilemma, I am trying to access the translations data in the API using this endpoint . However, I am struggling with retrieving the desired information. results = data.results; var li= ''; for (const x of results) { l ...

jqueryarraysjsonapi

Ordering an Array of JavaScript Objects in a Custom Sequence (utilizing pre-existing methods)

Imagine we have an array of objects: ["c", "a", "b", "d"] Is there a way in ECMAScript or through a third-party JavaScript library to rearrange the objects in the first array to match the order specified by the second array, all within one line or functi ...

javascriptjqueryarrayssortingunderscore.js

Streamline email error management within nested middleware functions

I have implemented an express route to handle password resets, which includes finding the user and performing some error handling. However, I am now faced with the challenge of adding additional error handling within a nested function, and I am uncertain a ...

javascriptnode.jsexpress

Is there a way to prevent my ngx countdown from resetting when I refresh the browser or any page in Angular?

<countdown id="countdown" [config]="{leftTime: 10}" (event)="onTimerFinished($event)" class="fa fa-clock-o"></countdown> I have created a countdown in HTML and I would like some feedback on how it can be improved. Any suggestions? ...

phpangularjswordpress

Can PushState be used to Ajaxify CSS files?

Currently, I am in the process of developing a basic website and have decided to incorporate the Ajaxify library for seamless page transitions. One challenge I have encountered involves the combination of global CSS files (applied throughout the entire sit ...

javascriptjqueryhtmlcssajax

Access the contents of objects during the creation process

I am currently in the process of creating a large object that includes API path variables. The challenge I am facing is the need to frequently modify these API paths for application migration purposes. To address this, I had the idea of consolidating base ...

javascriptjsonreactjsobject

Converting JSON data into an Angular object

I'm struggling to map the JSON data below to an Angular 7 object: [ { "id": "123456", "general": { "number": "123", "name": "my name 1", "description": "My description with <li> html tags ...

jsonangulartypescript