Checking if a string is present in an array object with Angular.js using a filter function

In my Angular and Firebase app, users can create new discussion topics and vote on existing ones. When a user is logged in, their username is stored in currentUser.username. If they've upvoted a topic, their username will also be added to the array of upvotes in topic.upvotes.

The issue I'm facing is that topic.upvotes stores an array of values. For example, if Kenneth and Tyler both upvote a topic, topic.upvotes = {"Kenneth":"Kenneth","Tyler":"Tyler"}.

What I need to determine is whether a user has upvoted a topic so that I can apply conditional CSS to visually indicate that they have already voted on that topic.

I've been attempting this with the following code:

ng-class="{user_has_upvoted : signedIn() && topic.upvotes === currentUser.username}"

My goal is to add the user_has_upvoted class to the div only if the user is signed in and has actually upvoted the topic.

However, comparing topic.upvotes (an array) to currentUser.username (a string) using == or === does not work as expected.

I was hoping to use some sort of inArray() function, but I haven't found anything in angular that fits my needs.

Any suggestions or advice would be greatly appreciated. Thank you!

Answer №1

try out this code snippet:

ng-class="{highlight_user : isLoggedIn() && topic.likes[currentUser.username].localeCompare(currentUser.username) === 0}"

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

Tips on how to bring in a module from index.js

Recently, I set up a sample node.js project: "name": "example", "version": "1.0.0", "type": "module", Let's take a look at the index.js (only two lines): "use strict"; import ...

Issue with Tanstack React Query failing to import

Attempting to integrate tanstack react query into my current project to handle state management has proven challenging. Following a tutorial on using react query with nextjs 13, I thought I was following it correctly. However, I encountered various import ...

Incorporate JavaScript code into contentWindow

Attempting to utilize a Javascript postMessage function, similar to how it can be done with an iframe, but now with an embed element. The reason for using an embed is due to the bug in IOS devices which causes issues with setting iframe width and height. ...

Placing a div over a JavaScript element

Is it feasible to overlay a div(1) with a background image on top of another div(2) that contains JavaScript (like Google maps API v3)? I have experimented with z-index without success, and I am unable to utilize absolute positioning because I depend on t ...

Preventing AngularJS from Ignoring HTML Elements

Is there a way to calculate HTML content within an AngularJS object (such as {{names}}) that includes an '<a>' element? When I try to display it, the result looks like this: <a href="http://www.example.com">link text</a> I&ap ...

Exploring distinct values in multidimensional arrays with varying key identifiers

Within my MySQL table, I store all website page loads with the following structure: [IP] [date] [hostname] The primary query used is: $log = mysqli_query($con, "SELECT * FROM log"); Subsequently, all values are stored in an array: while ($result = my ...

Error code E11000 is thrown due to a duplicate key in a Node.js application

Whenever I input data on the webpage, it syncs correctly with the database. However, when I attempt to fill out the same form again, an error occurs: { "code": 11000, "index": 0, "errmsg": "E11000 duplicate key error collection: test.creates i ...

Encountered an npm ERR while executing the React project

I'm encountering an issue with running my React project. When I use the command "npx start", I receive the following error message. Can someone please assist me with this? npm ERR! could not determine executable to run npm ERR! A detailed log of thi ...

Identifying Changes in Form Values Using jQuery

I am facing a challenge with a dynamic form that needs to detect the field sequence properly. Below is my JavaScript file: var i = 1; $("a.add-line").click(function(){ $("div.items").append( $('<div>').attr('id',&ap ...

I encountered an issue while trying to integrate VideoJS with React

While using VideoJS, the video plays without any issues. However, I am facing an issue where the available source options are not being displayed as they should be. I attempted to use a plugin for the sources, but even then, the options didn't show u ...

Puppeteer: Interacting with login dialog box fields

I am currently facing an issue while attempting to generate a .pdf file from a specific page on our Intranet using Puppeteer and Headless Chrome within Node.js. Generating a .pdf file from a regular webpage poses no challenge, but I am encountering diffic ...

Tips for displaying previous values when discarding changes to a record in a material-ui table

How can I prevent changes from reflecting in a material-ui table when clicking on the X icon while editing a row? Is there a way to only save the edited record on the check (_) icon instead? Any suggestions or solutions would be greatly appreciated as I am ...

Transfer information to firebase using a Java class and fetch a single attribute in a different activity

Firebase Database LinkI've been encountering an issue while trying to store data in Firebase using a particular code snippet. Previously, I was able to save data by creating new children under users>uid without any problems. However, now that I am att ...

The body onload function fails to run upon the page loading

I'm having trouble with my body onload function not executing. When I load the page, I want to display all records that are selected in the drop_1 dropdown and equal to ALL. I have a script that sends values q and p to getuser.php. The values sent are ...

Uploading custom images with a WordPress widget

I have been occupied with developing my own WordPress Widget, and almost everything is functioning smoothly except for the WordPress media uploader. I have incorporated eight buttons and input text fields to store the URL of the uploaded image. The click ...

displaying a specific section depending on the radio button chosen

I am dynamically creating radio buttons using ng-repeat in my code snippet below: <input type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" /> Currently, this code generates 2 radio buttons. I would like to display a spe ...

Exploring ways to incorporate mouse movements into this simple JavaScript script

I have recently decided to convert my JavaScript code into jQuery code to incorporate mouse events. After downloading the latest version of jQuery and renaming it as "jquery.js," I made modifications to my manifest.json file by adding "jquery.js." However, ...

Iterate through the form fields and save the information into an object

I am attempting to create a JavaScript object by looping through form inputs. const data = {}; // loop through each input found in form $('#form_name').filter(':input').each(function() { const $id = $(this).attr('id'); c ...

The jQuery validation applied to the data submission per post is not functioning as expected as the $_POST variable is appearing empty

I'm facing an issue with Jquery, AJAX, and field validation. Although the validation and redirect are working fine, I'm having trouble retrieving values from fields in the $_POST array. Below is the start tag of the form: <form class="smart ...

Having trouble bringing my custom-built Angular module into my Angular application

Currently considering the utilization of this Yeoman generator as a starting point for a small project that will contain several reusable form components to be published. The generator constructs a module and an example component, directive, pipe, and serv ...