JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
  <div ng-controller="ctrl">
    <ul class="list">
      <li class="list__item" ng-repeat="checkFruitDescription in data">
        <!-- Where data is the JSON -->
        <span class="list__item__line-height"><strong>{{checkFruitDescription.fruitname}}</strong></span>
<br/>
        <label class="radio-button" ng-repeat="option in checkFruitDescription.options" ng-init="fruitId = checkFruitDescription.fruitID"> {{ fruitId }}
          <input type="radio" name="option_question_id_{{checkFruitDescription.fruitID}}" ng-model="selectedRadioArray[checkFruitDescription.fruidID][option.optionID]" ng-click="doSomething(checkFruitDescription.fruitID, option.optionID)" ng-value="option.optionID">
          Description: {{option.optiondescription}}
          <div class="radio-button__checkmark"></div>
        </label>
      </li>
    </ul>
  </div>
</div>

JavaScript

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.data = [{
      "fruitID": "1",
      "fruitname": "Apple",
      "options": [{
        "optionID": "1",
        "optiondescription": "Has seeds"
      }, {
        "optionID": "2",
        "optiondescription": "Can be eaten raw"
      }, {
        "optionID": "3",
        "optiondescription": "Has edible skin"
      }]
    }, {
      "fruitID": "2",
      "fruitname": "Banana ",
      "options": [{
        "optionID": "1",
        "optiondescription": "Has no seeds"
      }, {
        "optionID": "2",
        "optiondescription": "Can be eaten raw"
      }, {
        "optionID": "3",
        "optiondescription": "Needs to be peeled"
      }, {
        "optionID": "4",
        "optiondescription": "Short shelf life"
      }]
    }];

    $scope.selectedRadioArray = [];

    $scope.doSomething = function(fruitID, optionID) {
      // Where data = JSON
     /*if ($scope.data.fruitID.indexOf(fruitID) != -1) {
        // There is a match for fruitID in data.fruitID
        // Save the values to an array
        $scope.selectedIDS = [fruitID, optionID];

        // Push the array to a new array
        $scope.selectedRadioArray.push($scope.selectedIDS);
      } else {
        // Do something else
      }
      */
      console.log($scope.selectedRadioArray);
    }
  });