Toggle the visibility of a checkbox based on the JSON data

I have 4 check boxes that need to be dynamically displayed based on the value retrieved from my JSON. The JSON will only contain one checkbox name, and that specific checkbox should be shown to the user as checked. How can I achieve this functionality? Below is my material checkbox code:

<div fxLayout="row wrap" class="py-8" fxLayoutAlign="space-evenly">
  <mat-checkbox>Fragile</mat-checkbox>
  <mat-checkbox>Flyer</mat-checkbox>
  <mat-checkbox>Time Stipulated</mat-checkbox>
  <mat-checkbox>Gift Wrapped</mat-checkbox>
</div>

Here is a snippet from my JSON:

https://i.sstatic.net/Vsgfm.jpg

For example, if the JSON data contains "Flyer" as the checkbox name, only the "Flyer" checkbox will be displayed to the user as checked, while the others will be hidden.

javascriptjsontypescriptangular-material

Answer №1

Seems like there is some confusion with your query. You are trying to use Mat-checkbox without incorporating a JSON file. If your JSON structure is defined as follows:

SampleJson= [
{
    Name: "Fragile",
    isActive: true
},
{
    Name: "Flyer",
    isActive: true
},
{
    name: "Time Stipulated",
    isActive: true
},
{
    name: "Gift Wrapped",
    isActive: false
},

then you need to update your HTML code to:

<div fxLayout="row wrap" class="py-8" fxLayoutAlign="space-evenly">
  <mat-checkbox [(ngModel)]="SampleJson[0].isActive">Fragile</mat-checkbox>
  <mat-checkbox [(ngModel)]="SampleJson[1].isActive">Flyer</mat-checkbox>
  <mat-checkbox [(ngModel)]="SampleJson[3].isActive">Time Stipulated</mat-checkbox>
  <mat-checkbox [(ngModel)]="SampleJson[0].isActive">Gift Wrapped</mat-checkbox>
</div>

I hope this solution resolves your issue. Happy coding!

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

Exploring the method to retrieve key value pairs within an array object using JavaScript

I have an array of JSON objects and I am trying to extract it as key-value pairs. Here is the code snippet: var fs = require('fs'); var parameters = { 'Tenantid': 'a62b57-a249-4778-9732', "packagecategoryn ...

javascriptarrayobject

Translate this Python JSON string "column1=value1;column2=value2" into a dictionary format: {"column1":"value1","column2":"value2"}

I have a simple request. I need to change this structure: "column1=value1;column2=value2" to JSON format like this: {"column1":"value1","column2":"value2"} If you know the best way to do this in Python, please share. Thank you in advance. ...

pythonjsontext

Having trouble retrieving image information within the Asp.net core controller

I am facing an issue trying to store image details in the database through Angular and ASP.NET Core. I am unable to retrieve the image data sent from Angular in the controller. Although I am able to obtain the image information using the [FromForm] attribu ...

angulartypescriptasp.net-core

How can AngularJS apps handle authentication?

Seeking input on user authentication with AngularJS and Zend... I currently have Angular on the client side and Zend on the server side handling authentication successfully. However, I'm looking for best practices and code examples for enhancing the ...

javascriptangularjszend-frameworkauthentication

Generating a JavaScript array containing all elements belonging to a specific class name

As I work on my website, I am attempting to create an array from elements that have a specific class. This array should retrieve the videofile attribute value from all `a` tags with the class `videoLink`. The desired values in the final array should be: ...

javascriptjqueryarraysfunctional-programming

Steps to extracting the JSON file from a pre-existing Google Map

I am looking to develop a customized Google Map search tool using the Google Maps API. I am curious if it is possible to extract the JSON data from a map created using the native Google Map management system, like this one: https://www.google.com/maps/d/v ...

jsongoogle-maps

A step-by-step guide to adding a checkbox column dynamically within handsontable

I am currently utilizing handsontable within a jsfiddle at http://jsfiddle.net/kc11/cb920ear/1/. My task involves dynamically inserting a checkbox column before the existing data. The structure I am working with appears to be a multidimensional array, as s ...

javascriptjqueryarrayscheckboxhandsontable

Sending an array of textboxes to AJAX as JSON

Looking for help with passing two different arrays, main_name[] and sub_name[], to the next page via AJAX for database insertion. Could you assist me with how to pass arrays as data in AJAX? <input type="text" name="main_name[]" value="" > <input ...

javascriptphpjqueryjsonajax

classes_1.Individual is not a callable

I am facing some difficulties with imports and exports in my self-made TypeScript project. Within the "classes" folder, I have individual files for each class that export them. To simplify usage in code, I created an "index.ts" file that imports all class ...

javascriptnode.jstypescript

Updating Data in a JSON File

"mysql": { "host": "3.3.3.3", "portNo": "3306", "database": "cool", "username": "admin", "password": "password123" }, "sqlite": { "host": "4.4.4.4", "portNo": "1433", "database": "awesome", "username": "user", "passw ...

pythonjsonbashshellawk

Trigger a click event on a third-party webpage that is embedded within an Angular application

In the process of developing my angular application, I found a need to incorporate a graph visualization tool. To achieve this, I utilized the HTML <embed> tag and successfully integrated the graph into my application. Now, my objective is to enable ...

javascriptjqueryangularangular9

Is there a jQuery tool that can effortlessly add items to a list element?

I'm currently developing a task management application on the web. I have a textarea where users can input tasks, and when they press enter, it should automatically be added to a list element (li). The adding functionality works, but only after refres ...

javascriptjqueryhtmlcss

What are some ways to capture and save the window width prior to launching my Nuxt application?

I am working on a Nuxt application where I need to display different components based on the window width and send a request to create a session with the device width as one of the header parameters. Here is my approach: In my store code: //index.js expor ...

javascriptvue.jsnuxt.jsvuex

Show button once modal has been closed

I have a 'start' button that triggers a modal window with an embedded video. Once the user closes the modal, I want to show a 'redeem' button after a delay of 6 seconds. HTML: <a id="video-start" onclick="openVideoModal()"><i ...

javascripthtmlcssmodal-dialogbootstrap-modal

Mastering the management of various events within React Material UI components

I am working with a Material UI Switch Component and need to detect click events on it. In certain situations, I want to prevent the change event from triggering. What is the most effective way to achieve this? While I have previously used event.preventD ...

javascriptreactjsmaterial-ui

Creating a Checkbox-enabled Muiv5 TreeView for an array of objects: Step-by-step guide

Currently, I am utilizing the muiv5 treeview component to construct a treeview dropdown. Unfortunately, the component does not have built-in checkbox support for selection/deselection. However, after conducting some research, I managed to find a somewhat s ...

reactjstypescriptmaterial-uitreeview

Is there a proper method for populating an HTML text with values from a form?

As a newcomer, I could really use some guidance here :) I'm trying to populate text with various words, numbers, and calculation results from a form. This is my initial attempt for just one field/word, and it appears to be functioning correctly. Do y ...

javascripthtml

Instructions for correctly integrating the ng2-datepicker module into an Angular 2 application

Ng2-datepicker (1.0.6) Angular2 (2.0.0-rc.5) As I attempted to implement it in my HTML following the documentation, I encountered the following error: zone.js:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngMode ...

javascripthtmlcssangularng2-datepicker

Querying a Database to Toggle a Boolean Value with Jquery, Ajax, and Laravel 5.4

I am facing an issue with a button I created to approve a row in a table. It seems that everything is working fine when clicking the button, but there is no change happening in the MySQL database Boolean column. Here is the code for my button: <td> ...

javascriptphpjqueryajaxlaravel-5.4

The Chrome browser allows interaction between two separate divs, where a button located in one div can impact

One issue I encountered involves a button located within a div that has unintended consequences for another div. Here is the basic structure of the elements: <div> <div> <div> <div> <butto ...

javascripthtmlcssbootstrap-4