angular data binding returning the identifier instead of the content

I have been dealing with managed fields retrieved from a web server in the following format:

{
   "fields":{
      "relationshipStatus":[
         {
            "fieldId":4,
            "name":"Committed"
         },
         {
            "fieldId":2,
            "name":"Dating"
         },
         {
            "fieldId":6,
            "name":"Engaged"
         },
         {
            "fieldId":3,
            "name":"Exclusive"
         },
         {
            "fieldId":7,
            "name":"Married"
         },
         {
            "fieldId":8,
            "name":"Open Relationship"
         },
         {
            "fieldId":5,
            "name":"Partnered"
         },
         {
            "fieldId":1,
            "name":"Single"
         }
      ]
   }
}

Recently, I encountered an issue where I needed to filter profiles based on the relationship status field. To achieve this, I utilized a drop-down selector that performs the filtering operation using the field name like so:

<select ng-model='$storage.filter.relationshipStatus' 
  ng-options="option.fieldId as option.name for option in managedFields.relationshipStatus" 
  ng-change="changeFilter('relationshipStatus')">
  <option value="">Any Relationship Status</option>

In another instance, while viewing individual profiles in a template, I noticed that when attempting to display the relationship status using {{profile.relationshipStatus}}, it returned a numerical value (e.g., 4 for Committed) instead of the actual string value. I am unsure how to modify the profile template to show the string representation (e.g., "Committed") instead of the numeric identifier. I've tried using 

{{profile.relationshipStatus.value}}
without success and considered resorting to custom JavaScript logic to convert the numbers to strings such as 
{{profile.relationshipStatus | relationshipToString}}
. As someone who is relatively new to this, I'm struggling to find relevant examples or resources on data binding for guidance.

If anyone could offer some advice or point me in the right direction, I would greatly appreciate it. Thank you.

javascriptangularjsjsonangular-template

Answer №1

It appears that there is an error in the line below, as you are attempting to select fieldId and treating it as option.name

ng-options="option.fieldId as option.name for option in managedFields.relationshipStatus"

//consider using this instead
ng-options="option.name as option.name for option in managedFields.relationshipStatus"

For more information, please refer to the following link: https://docs.angularjs.org/api/ng/directive/ngOptions

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

Distinguishing factors between $(document).ready and $().ready in jQuery

Currently, I am delving into some unfamiliar code in my work. I am making an effort to grasp it thoroughly. While I have a few months of experience using jQuery and am fairly comfortable with it, I'm still not an expert. Unfortunately, my attempts to ...

javascriptjqueryjquery-selectors

JavaScript Conversion of Characters to ASCII Values

After converting a string input into a split array, I now need to convert that split array into ASCII for evaluation. Can someone provide guidance on how to do this? ...

javascript

Jquery script that utilizes the Steam WebAPI to return data

I'm encountering an issue with a script I found on github. I added value.appid myself, thinking it was logical, but I believe that data.response.games contains values for all my games. How can I either print or view what is defined? I would like to ...

javascriptjquerymysqlwebapisteam

Using PHP to extract metadata from Tumblr JSON

I have successfully implemented the Tumblr api v2 with PHP and it's working. The code snippet I used is: <?php require 'vendor/autoload.php'; // Authenticate via OAuth $client = new Tumblr\API\Client( 'my', ' ...

phpjsontumblr

Which is more memory efficient: creating an object with functions defined on it using a function, or creating an instance of a class?

Imagine if I were to create a hypothetical class (this is purely for demonstration purposes) class X { constructor(word, number) { this.wordNumberString = word + number; } saySomething() { return `${this.wordNumberString} ${this.wordNumberStr ...

javascript

Is there a way for me to include .js or .cpp prior to using the Vim shortcut key gf?

When using a programming language like nodejs, the require function does not require the addition of the .js extension. For example: var Assert = require('./app_base'); However, in vim, when using gf, it cannot find app_base without the .js ext ...

javascriptnode.jsvim

When trying to set the state in the OnMouseOver event, an error is thrown: TypeError - React is

Despite encountering numerous posts discussing this issue, I am struggling to resolve it in my particular scenario. I have a collection of items that I am attempting to apply color changes to (the div's) when they are hovered over. The coloring only ...

javascriptreactjs

The function Router.use() needs a middleware function, but instead, it received an undefined

Attempting to create an authentication app using Node.js, but encountering an error as described in the title. The code for app.js is already set up like this: var createError = require('http-errors'); var express = require('express'); ...

javascriptnode.jscompiler-errorsruntime-errorbackend

Interacting between Angular.js controllers and Polymer custom elements

Incorporating Angular.js and Polymer in my project has been a challenge, particularly when it comes to the communication between Angular.js controllers and Polymer custom elements. One specific issue I've encountered involves implementing an AuthServ ...

angularjscontrollercommunicationpolymercustom-element

Dynamically add a plugin to jQuery during execution

After installing jQuery and a jQuery-Plugin via npm, I am facing the challenge of using it within an ES6 module. The issue arises from the fact that the plugin documentation only provides instructions for a global installation through the script tag, which ...

javascriptjquerynpmbootstrap-select

The function did not execute properly, resulting in the express route returning no value

Encountering some issues with Express routes that are behaving inconsistently despite having identical code execution. The goal is to have a client application make API calls like this: async search(){ const query = this.$refs.searchInput.value; ...

javascripthtmlmongodbvue.jsexpress

Updating the URL in React and Redux

I am currently working on developing an application using React and Redux (DVA) with Ant.Design as the main framework. I am facing an issue where I need to change the URL when a user clicks on a button, and connect that URL change to a specific action so t ...

javascriptreactjsreduxreact-routerantd

Follow button on LinkedIn is secure with Google Chrome's Content Security Policy set to script-src report-sample

Having an issue trying to add a LinkedIn Follow button to the website. It works perfectly in Firefox, but is not functioning in Chrome. The Console displays the following error: The source list for Content Security Policy directive 'script-src&apos ...

javascriptgoogle-chromelinkedin-apilinkedin-jsapi

Tips for customizing the appearance of a redux-tooltip

After implementing the redux-tooltip from this GitHub repository, I wanted to customize its styling to better align with my application's design. However, I realized that the Tooltip-Component's divs do not have any identifiers or class names, ma ...

javascriptcssreactjsreduxreact-redux

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

javascripthtmlcss

Transferring information between components and pages within Next.js involves the passing of data

I currently have an index page set up like this: getServerSideProps(){ //Making two API calls here api1() api2() return{ props:{data:gotDataApi1, data2:gotDataApi2} } } The data retrieved from these APIs is then passed to a component within the index pag ...

javascriptnext.js

How can you retrieve the current server time within the MEAN stack (MongoDB, Express, Angular, Node)?

SCRIPT: exports.generate = function (req, res) { var note = new Note(req.body); note.author = req.author; console.log("1) PREVIOUS: "+note.author.prev.getTime()); console.log("Server Time is: "+getServerTime()); if (note.author.prev != null &a ...

angularjsnode.jsmongodb

Using tokens to make consecutive API calls in JavaScript/Node.js

After generating the token, I need to make sequential calls to 5 different APIs. The first API used to generate the token is: POST https://idcs-xxxx.identity.c9dev2.oc9qadev.com/oauth2/v1/token Using the username and password, I will obtain the token from ...

javascriptnode.js

Exploring various data promises in AngularUI router

I am attempting to utilize the $q service to resolve multiple promises using the $q.all() function with AngularUI router. However, I am encountering issues where it is failing or not functioning as expected. This snippet is from my configuration file that ...

javascriptangularjsangular-ui-router

Utilizing custom routing rules to fetch data from a local JSON file using http.get in Angular 2

Currently facing a challenge with Angular as a beginner, specifically when attempting to retrieve a local .json file using http.get. The issue seems to be related to my routing configuration, and I'm unsure how to resolve it. File Structure: api ...

jsonangularangular2-routingangular-routing