Exploring AngularJS: Filtering a nested JSON array

Just starting out with AngularJS and I could use some assistance. I have a JSON file that I've been working on, and I'm attempting to create a search filter by ingredient using AngularJS. Can anyone provide guidance?

{
    "id": 01,
    "recipe-name": "Fried Fish",
    "ing": {
        "i1": "1 fish",
        "i2": "1 egg",
        "i3": "1\/2 cup flour",
        "i4": "salt and pepper",
        "i5": "chili leaves"
    }
}

Below is the snippet of code for the filtered results:

<div class="results" ng-repeat="r in recipes | filter:q.ing">
javascriptangularjsjson

Answer №1

No filter necessary.

To display the ingredients, just use ng-repeat on the recipes.ingredients nested object.

<div class="results" ng-repeat="ingredient in recipes.ingredients">
    <p>{{ingredient}}</p>
</div>

Check out this simple example: http://jsfiddle.net/1zpc94qs/

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 can you create a personalized sorting order using odata?

Within my AngularApp, I retrieve data from a WebAPI using OData queries. All the retrieved results contain both a date and an integer status code. The status codes range from 1 to 4. I am aiming to organize my results in such a way that all items with a ...

javascriptangularjsodata

Attempt to resend email if unsuccessful

I have implemented nodemailer in my node application for sending emails. However, I am encountering an issue where the email sometimes fails to send and generates an error message. Typically, it takes two or three attempts before the email is successfully ...

javascriptnode.jsexpressnodemailer

Undefined value is encountered when passing props through the Context API in a REACT application

Exploring My Context API Provider File (Exp file) import react form 'react'; import {createContext} from "react"; export const ContextforFile = createContext(); export function ContextData(props){ let rdata=props.data return( &l ...

javascriptnode.jsreactjsmern2d-context-api

Utilize Node.js and Java to fetch MQTT data in an asynchronous manner

I have been working on a project to create a publish/subscribe application where a Java program acts as the publisher and a NodeJS program as the subscriber. The Java client connects to an MQTT server and sends random data, while the NodeJS client subscrib ...

javascriptjavaajaxnode.jsmqtt

Issue: Encountered a problem when attempting to encode the data type ([object Object]) into a Firestore Value while using Node

While attempting to insert a document with the geopoint dataType in firestore using the following instance: new firebase.firestore.GeoPoint(latitude, longitude) I encountered the following error. https://i.sstatic.net/yKuIs.png ...

javascriptnode.jsexpressfirebasegoogle-cloud-firestore

Is there a way to incorporate multiple rules from data into a text component using Vuetify?

I'm looking to establish specific rules within a mixin for my components. Allow me to provide a straightforward example of my request: Example Link The code snippet: <v-text-field :rules="[nbRules, requiredRules]" outlined v-model="name" label ...

javascriptvue.jsvuetify.js

Syntax for ng-repeat utilizing angular-ui-scroll with (key, value)

I am currently exploring ways to improve the performance of a large table that I am rendering. During my research, I stumbled upon an intriguing solution called angular-ui-scroll which I am eager to experiment with. In order to populate my table, I am uti ...

angularjsangularjs-ng-repeatui-scroll

Preserving the initial input values in a secure manner for future reference, utilizing either an object or a

Recently, I've started revisiting a script I created a while back that checks for changes in a form to prompt a message asking 'Would you like to save your changes?'... One thing that's been on my mind is whether I should store the ori ...

javascriptjqueryhtmlinput

Json error message displayed

I am currently learning javascript and working on creating a JSON code for a website. However, I am facing some error messages related to style, even though I have used style in the code. The specific error messages are as follows: 1: Bad template.json - E ...

javascriptjson

Is there a way to keep a div element anchored at the top of the page until I reach the bottom and then have it stick to the bottom as I continue

I have a question that I hope is clear enough! On my webpage, there is a div at the top that I want to move to the bottom when I scroll and reach the end of the page. Hopefully, you understand what I'm trying to achieve! If anyone has any ideas, I&ap ...

javascriptjqueryhtmlcsstwitter-bootstrap

Animate the toggling of classes in jQuery

Here is a code snippet that I came across: $('li input:checked').click(function() { $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000); }); This code is functioning correctly when the element is clicked for the first time. I ...

javascriptjqueryhtmlcss

Tips for retrieving custom header values in an Angular application upon opening the application

I have an Angular application called A, which is opened by another application B. When application B opens application A, it sends a specific attribute in the request header. How can I access this custom header in my Angular application when it's bein ...

angularjs

"Discrepancy found in results between Node-Fetch POST and Firefox POST requests

I have encountered a challenge while trying to replicate a successful log-in process on a website using node-fetch after being able to do so with Firefox. The login process consists of three stages: Visiting /login which returns a sessionToken from the we ...

javascripthtmlhttpweb-scrapingfetch

Guide for getting JavaScript Word Counter to function correctly in Internet Explorer

As a JavaScript beginner, I recently implemented a word counter on a form using JavaScript. It works smoothly across all browsers except for Internet Explorer. In IE9 and IE11, the word counter becomes unreliable, and at times, the entire field can become ...

javascriptjqueryword-count

Can incorporating mongoDB ObjectID in a query parameter impact search engine optimization (SEO)?

When using the MongoDB object ID in query parameters, such as: in a browser URL, http://example.com/get-details/507f191e810c19729de860ea To transfer this ObjectID from one state to another, I am utilizing $stateParams. Then, in the $http request, the ...

angularjsmongodbexpressseomean-stack

Issue with Sales Apex Error Message Detected in Unaltered Line

An Error Message occurred during deployment, specifically on a line that was never altered during editing. System.JSONException: Unexpected character ('"' (code 34)): was expecting comma to separate OBJECT entries at [line:213, column:14] ...

jsonsalesforceapexsalesforce-lightning

Is there a web-based tool available that allows for POST requests with a JSON payload to be formatted in a visually pleasing manner?

Looking for a solution to pretty print incoming JSON strings that can be POST requested with JSON payload? Check out some of the online JSON viewers available. ...

jsonpostprinting

Is the jQuery ajax .done() function being triggered prematurely?

Struggling with a problem here. I'm dealing with this code (simplified): var initializeZasilkovna = function () { // Initialize object window.packetery.initialize(); }; // Check if the object doesn't exist if (!window.packetery) { // It ...

javascriptjqueryajax

coming back to the cordova application after using the browser

I recently developed a basic app using the ionic framework. There is a feature in the app that opens an external payment gateway in a system browser to process payments. After successful payment, a script on my server sends an HTML page to display a succes ...

javascriptcordovabrowserionic-framework

Is there a way to send both a List and an Integer from C# to Javascript?

Hello, I am looking for a way to pass List<ClassName> and count(int) values from my C# code-behind to JavaScript. Can anyone please guide me on how to achieve this? ...

javascriptasp.net