The issue with AngularJS array filtering remains unresolved

How can I get this filter to function properly?

<div ng-repeat="rvs in reviews | filter:{ Name:'{{ r.Name }}' }">
 {{ rvs.Name }}
</div>

'r.Name' is retrieved from another array "r in restaurants"

However, instead of using r.Name directly, inputting the string 'John' works like this:

<div ng-repeat="rvs in reviews | filter:{ Name:'John' }">
 {{ rvs.Name }}
</div>

List of Reviews

'reviews'

{
  "reviews": [
    {
      "Name": "Sagar Ratna",
      "Reviewer": "Jaskaran",
      "Comments": "Great service, healthy food!",
      "Date": "25th Sept. 2016",
      "Rating" : "4"
    },
    {
      "Name": "The Night Factory",
      "Reviewer": "Pawandeep",
      "Comments": "Nice location, ok service!",
      "Date": "29th Sept. 2016",
      "Rating" : "3"
    }
  ]
}

List of Restaurants

{
  "records": [
    {
      "Name": "Sagar Ratna",
      "Image": "./images/sr.jpg",
      "Address": "Mohali",
      "Type": "South Indian",
      "Hours" : "10:00-23:30"
    },
    {
      "Name": "The Night Factory",
      "Image": "./images/nf.jpg",
      "Address": "Chandigarh",
      "Type": "South Indian",
      "Hours" : "24/7"
    }
  ]
}

Answer №1

Erase the '{{}}' from '{{r.Name}}'

<section ng-repeat="rvs in reviews | filter:{ Name:  r.Name  }">
 {{ rvs.Name }}
</section>

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

ngTable fails to refresh after adding new data

I am facing an issue where the ngTable does not update automatically when a new item is added to the database. However, if I refresh the page (F5), the new data is displayed. I am using ng-table to display the data. Note: The AngularJS consumes data from ...

Tips for managing various modifications in input fields with just one function

I need to update the state object when data is entered into a form with 2 fields and submitted. Instead of creating a separate function for each input field, I want to handle the input changes in a more efficient way. Sample Code: import React, {Compone ...

What are the practical applications and distinctions between single-page and multipage apps in AngularJS?

I've been exploring the differences between single page apps and multi page apps, and I believe I have a good grasp on their distinctions. Unlike multi page apps, a single page app begins by loading a single HTML page and does not fully refresh or ove ...

The jQuery execCommand feature fails to generate a pop-up when used within the contenteditable attribute of an HTML tag

Trying to implement an inline text editor using the jQuery execCommand function. Below is a snippet of my source code: /*******************************************************************/ /********** Click: inner of contenteditable text-editor div *** ...

Is there a way to calculate the number of days between two selected dates using the bootstrap date range picker?

I recently implemented the bootstrap daterange picker for selecting start and end dates, and it's been working perfectly. However, I now have a requirement to display the count of days selected. Here's my current code: $('input[name="datera ...

picker and calculator for selecting date ranges

I'm currently working on a hotel booking form where prices are calculated based on the number of adults, seniors, and students. I'm trying to add a date range picker feature that will determine the total cost depending on the selected number of d ...

Guide to swapping images on button click in HTML with dynamically changing image URLs retrieved from the server

I am a beginner in client-side scripting and new to Stack Overflow. I am looking for guidance on how to change an image within a div element upon clicking a button or anchor tag. Here is the code snippet I have written to achieve this: $scope.captchaCha ...

What is the fewest amount of commands needed to generate a client-side Javascript code that is ready for use?

In the realm of JavaScript libraries found on Github, it has become increasingly challenging to integrate them directly into client-side projects with a simple script tag: <script src="thelibrary.js"></script> The issue arises from the browse ...

Manipulating the DOM with Javascript and jQuery: Adding a new element and retrieving its reference

I am encountering an issue with a Web App that relies on JavaScript and jQuery. Essentially, the website includes a button that triggers a JavaScript function when clicked. Within this function, there are two other functions named Foo and Bar. Foo generate ...

Tips for utilizing various broadcast options to trigger Angular controllers according to the user's chosen selection

I'm currently developing an angularjs application that includes multiple date range pickers on a single web page. When a user selects a date range from one of these pickers, I need to send the selected dates to the corresponding angular controller ass ...

When the user hits the enter key, automatically submit a form without the need for

Is it possible to submit a form on enter using type="button"? Here are my input fields: <input type="text" id = "login-user" class="form-control log-input" placeholder="Username" required="required"> <input type="password" id="login-password" clas ...

Using Jquery to manipulate arrays based on options selected from a dropdown menu

I am currently working on a feature that suggests tags based on the selected category. This involves using a select box to choose a category and then displaying sub-categories in a list. Here is the current setup: <select id="categorySelect"> < ...

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

Assign the obligatory attribute to an input widget in the event it is not concealed

I'm currently developing a dynamic form using angular.js. There are several input fields that need to be displayed based on certain conditions. <div ng-show="condition()"> <input type="text" name="field" required> </div> Howeve ...

What is the method for generating a 2D array in JavaScript when the array's length is unknown?

I'm trying to create a 2D array that groups animals by their first letter of the alphabet. However, the output is not what I expected. I want each letter to have its own sub-array with corresponding animal names. Here's the code I tried: functio ...

An unexpected token was discovered by Jest: export { default as v1 } when using uuid

While working on writing Jest tests for my React component in a Monorepo, I encountered an error while running the Jest test. ● Test suite failed to run Jest encountered an unexpected token... ...SyntaxError: Unexpected token 'export' ...

refreshing my dropdown menu after implementing a custom directive

I've implemented the bootstrap-multiselect plugin to create multi-select drop downs. Here is an example: This is how my dropdown is structured: <select id="ms{{chore.id}}" multiple="multiple" applyplugin> <option ng-repeat="familyMembe ...

Modifying the content of JSON key values

In my application, I am using MongoDB, Express, and MongoDB. When receiving data on the server side, it comes in the form of an array of objects (JSON) named upProbations. For example, let's say I find information about Max: [ { Name ...

What is the mechanism by which nodes handle multiple requests simultaneously?

Lately, I've delved into the world of NodeJs, trying to grasp how it handles multiple concurrent requests. It's fascinating that NodeJs operates on a single-threaded event loop architecture, where only one statement executes at a time on the main ...

Node.js tutorial: Building routes with regex and implementing redirects

Can anyone provide guidance on how to utilize route and redirect URLs with parameters in Node.js using Express? If the URL is xyz/?s=test, it should redirect to indexRouter. If the URL is xyz/, it should also redirect to indexRouter. I'm facing issu ...