How to print data in Tabular format from this given JSON

时间:2017-06-15 09:30:24

标签: angularjs

I am trying to print the data under tabular format .

The data which is present under "properties" (ApprovalStatusShrtStrngVal and FluidCodeShrtStrngVal)

I have tried as

    <div ng-app="myapp" ng-controller="FirstCtrl">

             <table border="1">
      <tr>
        <th ng-repeat="(key, val) in collectioninfo.records.properties">{{ key }}</th>
      </tr>
      <tr ng-repeat="row in collectioninfo">
        <td ng-repeat="column in row">
          {{ column }}
        </td>
      </tr>
    </table>  
</div>

JSON is

{
    "records": [{
        "keys": ["n"],
        "length": 1,
        "_fields": [{
            "identity": {
                "low": 1128,
                "high": 0
            },
            "labels": ["TestLabel"],
            "properties": {
                "ApprovalStatusShrtStrngVal": "Working",
                "FluidCodeShrtStrngVal": "P"
            }
        }],
        "_fieldLookup": {
            "n": 0
        }
    }, {
        "keys": ["n"],
        "length": 1,
        "_fields": [{
            "identity": {
                "low": 1129,
                "high": 0
            },
            "labels": ["TestLabel"],
            "properties": {
                "ApprovalStatusShrtStrngVal": "Working",
                "FluidCodeShrtStrngVal": "P"
            }
        }],
        "_fieldLookup": {
            "n": 0
        }
    }],
    "summary": {
        "statement": {
            "text": "MATCH (n:TestLabel) RETURN n LIMIT 25",
            "parameters": {}
        },
        "statementType": "r",
        "counters": {
            "_stats": {
                "constraintsRemoved": 0
            }
        },
        "updateStatistics": {
            "_stats": {
                "constraintsRemoved": 0
            }
        },
        "plan": false,
        "profile": false,
        "notifications": [],
        "server": {
            "address": "localhost:7687",
            "version": "Neo4j/3.2.0"
        },
        "resultConsumedAfter": {
            "low": 37,
            "high": 0
        },
        "resultAvailableAfter": {
            "low": 3,
            "high": 0
        }
    }
}

http://jsfiddle.net/9fR23/498/

please let me know how to fix this

ApprovalStatusShrtStrngVal FluidCodeShrtStrngVal (Header)
Working P (Values)

1 个答案:

答案 0 :(得分:1)

You have to loop through your array properly to get the desired result.

<table border="1">
  <tr>
    <th ng-repeat="(key, val) in collectioninfo.records[0]._fields[0].properties">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in collectioninfo.records">
    <td ng-repeat="column in row._fields[0].properties">
      {{ column }}
    </td>
  </tr>
</table>

Working Fiddle :http://jsfiddle.net/9fR23/499/