Looking to construct dynamic checkboxes in Angular by parsing a JSON object retrieved through AJAX

I have a JSON document structured like the example below, and I am looking to generate checkboxes dynamically using Angular.

let data = {
"Name":[
    {
        "tagId":4489,"name":"Name","label":"Employee Name"
    }
],
"Service":[
    {
        "tagId":1722,"name":"good service","label":"Good Service"
    },
    {
        "tagId":3707,"name":"bad service","label":"Bad Service"
    }
]};

As I am still getting familiar with AngularJS, the checkboxes need to be displayed in the specific format outlined below.

Name

[ ] Employee Name

Service

[ ] Good Service

[ ] Bad Service

The JSON data is fetched via AJAX on application startup within my main controller. However, I am unsure how to utilize Angular's ng-repeat function to construct the checkboxes as required.

Any guidance or assistance would be greatly appreciated.

javascriptajaxjsonangularjsangularjs-ng-repeat

Answer №1

Take a look at my JSFiddle. I believe that my solution is more comprehensive compared to Khalil's.

http://jsfiddle.net/nicolasmoise/8YQPh/1

I've developed a factory function 

.factory('checkBoxFactory', function(){})
which manipulates the JSON object by adding a check="false" attribute to each tag. This step might not be essential, but I think it's beneficial to preset the values in case the user doesn't interact with them initially.

Additionally, there's a directive named 

.directive('checkboxes', function(){})
that leverages the checkboxes generated by the factory to produce the desired HTML markup. By using this directive, you can modify the category names (e.g., Name, Service) without breaking the functionality of the code.

If this approach doesn't align with your expectations or if you have any queries, feel free to let me know.

Answer №2

I created a simple example in jsfiddle that demonstrates what you are looking for right here.

Essentially, I added the data to the scope and looped through both lists, "Service" and "Name", using checkboxes with type=checkbox(angular docs) connected to an ng-model bound to a check value on each object (which angular will assign when the checkbox is activated).

You can keep track of the checkbox values by accessing check on each object. I achieve this by using ng-repeat="service in data.Service" and then referencing service.check.

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

Making sure to detect page refresh or closure using jQuery or JavaScript

Could there be a way to determine if a page has been refreshed or closed using jQuery or javascript? The current scenario involves having certain database values that need to be deleted if the user either refreshes or leaves the page. AJAX calls are bein ...

javascriptjqueryajax

Attempting to bring in an image file into a React component

My attempt to add an image at the top of my file failed, so I am looking for help with importing it. The code I originally tried did not work. The image does not display using the code below <img src={require('../../blogPostImages/' + post.bl ...

javascriptreactjsimageimportimporterror

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...

javascriptjqueryangularqueryselector

checkbox revision

I'm attempting to update some text indicating whether or not a checkbox is checked. The issue is that when the checkbox is checked, the textbox disappears and the text takes its place. <form name="myForm" id="myForm"> <input type="checkb ...

javascriptforms

Tips for presenting SVG symbols using Interpolation within Angular 7 from a JSON document

When it comes to displaying content in Angular 7 components, JSON is used. However, I have encountered a problem while trying to incorporate SVG icons from our UX team into the component using JSON. Using the img tag restricts me from applying a CSS class ...

jsonangularsvg

Utilizing Laravel's pagination feature with the power of AJAX and JSON communication

I currently have four fields that act as filters on my Laravel model. I am utilizing AJAX to fetch response data from the blade template and return it as a JSON response. Below is the function that I am using: public function displayTable() { // These ...

phpjqueryjsonajaxlaravel

Having an issue where my meshes disappear when using the Unreal Bloom render pass in ThreeJS. Any ideas on what might be causing

Just starting out with Three and I'm really enjoying it, but I seem to be stuck on a problem. The code in this gist might help: https://gist.github.com/TheeBryanWhite/a7a2041fc8848a0ba449897883c43bdc Initially, the first render functions correctly b ...

javascriptthree.js

Storing toggle open state using a variable

I have created a toggle open/close DIV with a UL list inside that looks like this: <div id="dropdown-1"> <div class="option-heading"> <i class="fa fa-angle-double-up"></i> <i class ...

javascriptjquerytoggleslidetoggle

Tips for creating an endless scrolling/loader feature in Nuxt?

Hey there! I am looking to display data after implementing infinite loading. The data is sent asynchronously using asyncData to the page with an ID. Page <script> export default { async asyncData({ $axios, store }) { const customerId = store.g ...

javascriptvue.jsnuxt.js

json How to retrieve the first index value in jQuery

As part of my Ajax loop, I am successfully generating JSON and iterating through the results. My goal is to extract only the first index value of JSON which is name. In jQuery, I have the following code: PHP $jsonRows[] = array( "name" => ...

phpjavascriptjqueryjson

Managing Laravel Ajax Redirects for Session Timeout in Handler

After encountering a TokenMismatchException due to session timeout, I am able to properly catch it and redirect to the login page when making an ajax call on the same page where I initially started. The issue arises in terms of visual redirection. Even t ...

phpajaxlaravel

What is the mysterious Angular JS object and how does it work?

While exploring the console, I stumbled upon a peculiar object: ng-1392763474770 Upon logging it, the following error was returned: ReferenceError: ng is not defined I couldn't find any information about this. What could it possibly be? By the w ...

angularjs

Using rowspan to display JSON data in AngularJS

Unique Json data: [{ cityName: Seattle, population: 1000000, rank: 1 }, { cityName: Portland, population: 800000, rank: 2 }, { cityName: San Francisco, population: 900000, rank: 3 }, { cityName: Los Ange ...

htmljsonangularjs

Searching for the main form following an ajax request in Rails

I'm feeling uncertain about the feasibility of my current goal, and I could really use some fresh perspectives. The challenge I'm facing involves a nested form that takes in a parent form and renders a partial. I'm aiming to dynamically add ...

ruby-on-railsajaxformsnested-forms

Retrieving an Angular Application directly from the Server

In order to ensure user authentication from the backend before any other code loads in my Angular app, I need the initial request sent to the backend to check if the user is authenticated. Only once the user has been verified as authenticated can the app b ...

javascriptangularjsnode.jsexpress

Unable to dispatch an email through the SMTP server using AJAX

I'm a beginner in asp.net MVC and I am attempting to send an email with an attachment using SMTP server and AJAX in asp.net MVC. Unfortunately, the email is not getting sent. HomeController.cs public JsonResult SendMailToUser() { bool re ...

c#ajaxasp.net-mvcsmtpoutlook-2007

Is it possible to trigger the eventListener just once for every instance of my constructor?

I have a common property that is shared among all instances of my constructor: function Me() { } Me.prototype.window = {}; I want to update this property when the window is resized, but I only want it to happen once for each resize event, regardless of h ...

javascriptconstructor

Master the art of returning two functions within a single function in Javascript with NodeJS and ExpressJS

Currently, I am facing an issue where I need to combine two objects and return them in one function. The challenge lies in the fact that both objects have almost identical properties, but different values. To tackle this problem, I created two separate fu ...

javascriptnode.jsexpress

Vue.js does not support the usage of external JSON files directly within HTML documents

I'm encountering issues fetching data from an external JSON file for a specific variable. I suspect that the problem lies in using Vue.js within the HTML, as it seems to be having trouble interpreting my code correctly.:joy: jsfiddle Additionally, I ...

javascripthtmlcssjsonvue.js

What is the difference in performance between using named functions versus anonymous functions in Node.js?

Currently, I am working on a Node.js app and was initially using anonymous functions for callbacks. However, after referring to the website callbackhell.com, I discovered that using named functions is considered best practice for coding. Despite switching ...

javascriptnode.js