JSFiddle - React, Tailwind, and code Playground

by kiran prasad

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html>

<body>

<div ng-app="myApp" ng-controller="jsCtrl">

<h1>Customer:</h1>

<pre>{{customer.connections | json}}</pre>

</div>
<p>The json filter converts a JavaScript object into a JSON string.</p>

</body>
</html>

JavaScript

var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
    $scope.customer = {
  "appName": "join",
  "fileName": "join",
  "element": [
    {
      "id": "get_hive0",
      "text": "getHive",
      "parentsParent": "Sources",
      "image": "/H-Cube/asserts/modules/ETL/img/get_hive.png",
      "nodetype": 1,
      "positionX": 53,
      "positionY": 279,
      "count": null,
      "properties": {
        "password": "reer",
        "port": "9083",
        "host": "10.1.7.82",
        "id": "get_hive0",
        "user": "yeye",
        "database": "hcubeapi",
        "tablename": "tripdata",
        "name": "hive1"
      }
    },
    {
      "id": "get_hive1",
      "text": "getHive",
      "parentsParent": "Sources",
      "image": "/H-Cube/asserts/modules/ETL/img/get_hive.png",
      "nodetype": 1,
      "positionX": 61,
      "positionY": 66,
      "count": null,
      "properties": {
        "password": "admin",
        "port": "9083",
        "host": "10.1.7.82",
        "id": "get_hive1",
        "user": "root",
        "database": "hcubeapi",
        "tablename": "tripfare",
        "name": "hive2"
      }
    },
    {
      "id": "dropcolsArray0",
      "text": "AlterFields",
      "parentsParent": "Transformations",
      "image": "/H-Cube/asserts/modules/ETL/img/dropcolsArray.png",
      "nodetype": 1,
      "positionX": 302,
      "positionY": 277,
      "count": null,
      "properties": {
        "dropcolsArray": [
          "dropoff_latitude",
          "dropoff_longitude"
        ]
      }
    },
    {
      "id": "join0",
      "text": "Join",
      "parentsParent": "Transformations",
      "image": "/H-Cube/asserts/modules/ETL/img/join.png",
      "nodetype": 1,
      "positionX": 566,
      "positionY": 156,
      "count": null,
      "properties": {
        "source_col": "serial_no",
        "target_col": "serial_no",
        "source": "hive1",
        "target": "hive2",
        "type": "inner"
      }
    },
    {
  ...