What is the best way to fill an array with ng-repeat in AngularJS?

How can I populate an array of objects with data using ng-repeat for a specific id in AngularJS version 1.4?

{
  "tagTypeDetails": [
    {
      "id": 3,
      "type": "Project Type",
      "Tags": [
        {"id": 21, "name": "Residential"},
        {"id": 22, "name": "Office"},
        {"id": 23, "name": "Retail"},
        {"id": 24, "name": "Hospitality"}
      ]
    },
    ...
  ]
}

In my HTML view, I want to display all the 'Tags' name related to a particular label field based on a specific id.

Currently, I am retrieving Tags names for all ids.

Example :

<label for="type" class="col-sm-2">Project type</label>
<div class="col-sm-8" ng-repeat="tags in addProjectVm.tagsData">
    <label ng-repeat="tag in tags.Tags">
        //here all Tags name are getting displayed.. //i want specific for type="Project Type" only
        <input type="checkbox" name="project" id="{{tag.id}}" value="{{tag.name}}"> {{tag.name}}
    </label>
</div>

I would really appreciate the best possible solutions as I currently have an alternative that is not considered best practice.

javascriptangularjsangularjs-ng-repeat

Answer №2

There is no necessity to fill in any information here, simply showcase the desired tag using ng-if:

<label ng-repeat="tag in tags.Tags" ng-if="tag.type === 'Project Type'">

Answer №3

This is the method I used.. 

vm.projectTag = {
    types: vm.getTags('Project Type'),
    styles: vm.getTags('Styles'),
    budgets: vm.getTags('Project Budget (S$)'),
    areas: vm.getTags('Area')
};

vm.getTags = function (tagName) {
    for (var i = 0; i < vm.tagsData.length; i++) {
        if (tagName == vm.tagsData[i].type) {
            return vm.tagsData[i].Tags;
        }
    }

    return [];
};


<label for="type" class="col-sm-2 control-label x-medium" id="label0">Project Type</label>
<div class="clearfix-height15"></div>
<div class="btn-group col-sm-8" data-toggle="buttons">
    <label class="btn btn-default btn-tag" ng-class="{active: tag.checked}" ng-repeat="tag in addProjectVm.projectTag.types"
                                                                         ng-click="addProjectVm.selectedTags.projectType = tag.id">
        <input type="radio" id="projectType" name="projectType" ng-model="tag.checked"> {{tag.name}}
    </label>
</div>

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

Guide to pairing array elements in JavaScript

To streamline the array, only elements with a value equal to or greater than the set threshold will be retained. These selected elements will then be used to create a new array comprising multiple objects. Each object will consist of two properties: the st ...

javascriptarraystypescript

Utilize jQuery to showcase elements in a dropdown menu

Hey everyone, I'm working on an ASP.NET MVC4 project and I'm using a jQuery script on the edit page. However, I am encountering an issue with displaying elements on the page. Here is the initial HTML markup of my dropdown before any changes: & ...

javascriptjqueryhtmlasp.netasp.net-mvc-4

React - the state fluctuates

The Goal I'm Striving For: Transmitting data from child to parent. My Approach: Utilizing this.state as outlined here Having trouble summarizing the issue: Upon calling console.log(this.state) in the function where I update the state, the correct va ...

javascriptmeteorreactjs

Angular displaying a blank screen, even though the complete dataset is available

I am currently working on my first website using Angular and I've encountered a problem. When I click on 'view project', it should return the data specific to that item. The strange thing is, when I log my JavaScript console, I can see all t ...

javascriptjqueryangularjs

Adjusting the height of the v-select component in Vuetify 3: A step-by-step guide

Is there a new method to set the height of the "v-select" component in Vuetify version 3? In previous versions, the 'height' prop was used in this way: <v-select :items="..." height="30" /> However, this prop has been ...

javascriptcssvue.jsvuetify.js

Ways to incorporate HTML elements into a forthcoming HTML element (React or JavaScript recommended)

As I work on enhancing the accessibility of some HTML content that is loaded through a third-party application, I find myself faced with the challenge of adding accessible elements to dynamically spawned list items with anchor tags. My attempt to achieve ...

javascripthtmlreactjsdom

Choose a different element based on its data attribute

Check out this fiddle I created: http://jsfiddle.net/4Ly1973u/. Below is the HTML code I used: <article> <select> <option name='First' value='first'>First</option> <option name='Second' v ...

javascriptjqueryhtmlcss

Using Node.js: Differentiating between two forms on the server side

I am currently working on a project that involves having two forms on my HTML page: <form id="enterForm" action="/" enctype="multipart/form-data" method="post"> <fieldset> <textarea id="queries" name="queries"></textarea&g ...

javascriptnode.jsformsform-submit

Arrange a bootstrap table according to the specified column index

Typically, bootstrap table sorting is based on the first column. If you want to change this default behavior, you can use data-sort-name="column_name" data-sort-order="asc/desc", as explained in this link. In my case, the columns are d ...

javascripthtmlbootstrap-4

The argument supplied in Angular using TypeScript is incompatible: a 'string' type cannot be assigned to a parameter expecting an 'Element' type

I'm facing 3 errors with Typescript in angular when working with D3js elements. I tried to create a mouseover event to display tag and value data corresponding to the bar graph, but encountered issues. I attempted declaring strings and even added "noI ...

javascriptangulartypescript

Choosing an element from an array in JavaScript that meets a certain criteria

How can I isolate an object from an array where the value for the "slug" key is "A"? For instance, consider the following data: var allItems = [ { "slug": "henk", "company_founded": "2008", "company_category": "Clean", ...

javascriptarraysjsonobject

Tips for capturing the current terminal content upon keypress detection?

After successfully installing the terminal on a test page, I am looking to highlight matching parentheses within it. This is similar to what is done in this example: I have a working solution in place and now need to integrate it with the terminal. ...

javascriptjqueryjquery-terminal

Issue with the placement of the bottom background when viewed in responsive mode

I'm encountering an issue with the placement of a bottom white image when I switch to responsive mode. It seems to not align at the bottom of the parent ul element as expected. If possible, could you provide assistance in addressing this issue? The i ...

javascriptjqueryhtmlcssslideshow

Transferring variables from parent scope to the ui-view component

I'm currently utilizing angular-ui/ui-router and have directives/components with isolate scope declared for rendering on state change. $stateProvider .state('about', { url: '/about', template: '<about>&l ...

angularjsangularjs-directiveangularjs-scopeangular-ui-routerangularjs-components

Using a JMeter variable within JavaScript code: Tips and tricks

I am exploring ways to automate the process of logging in multiple users with different credentials on a web page. My solution involves using JMeter with Selenium to achieve this automation. To read the usernames and passwords from a CSV file, I need to pa ...

javascriptseleniumcsvload-testingjmeter-5.0

Using Vue to pass data from a forEach loop to the href attribute

Currently, I am dealing with a situation in Vue where I have an array that I need to loop over and render anchor elements for each iteration. The array is passed in as one of my props. Despite trying various methods, I find that the solutions I come up wit ...

javascriptvue.jshref

What is the best way to detect and handle the destroy event in Kendo UI grids when a click event

How can I trigger a function when the delete button in a grid is clicked using JavaScript? ...

javascriptjquerykendo-uikendo-grid

IE11 encounters an error labeled SCRIPT1010, signaling an expected Identifier when compiled

Lately, I've been encountering a strange issue in Vue.js. Here's the thing: my application runs smoothly on all browsers locally (yes, even IE 11). But when I compile it using npm run build and deploy it to my server (which essentially serves con ...

javascriptvue.jsinternet-explorer-11vue-cli

Is there a way for me to determine the specific link that I have clicked on

I am implementing a table where users can edit the columns. Each cell contains an <a> tag that triggers a modal to change the value in the database and refresh the page. The issue I'm facing is that once the modal appears, the code doesn't ...

javascriptphpjqueryhtmlbootstrap-modal

Could the slow loading time of the React site be attributed to an overload of static assets?

As a ML professional diving into frontend development, I have recently incorporated various fixed assets such as images into the assets folder for React. However, I've noticed that my website is running slower than expected. Do you believe that these ...

javascriptreactjsfrontendserver-sideclient-side