0

I trying to convert a JSON content into the comma separated value in a table format.

I achieved this by using table with ng-repeat, but I am getting an extra space in end of the each value.

HTML code:

<div ng-controller="JsonConvertController">
    <div>
      <button class="btn btn-success" id="btnjsonConvert" 
              ng-click="convertJsonToServiceValues()">Convert Json</button>
    </div>

    <table>
      <thead>
        <tr>
          <th style="width:100px;">Types</th>
          <th style="width:300px;">Values</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="types in resultJson">
          <td><span ng-bind="types.typeName"></span>
          </td>
          <td>
            <span ng-repeat="type in resultValues | filter: {typeName: types.typeName}">
            <span ng-bind="type.values"></span>
            <span ng-show="!$last">,</span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
</div>

Controller code:

function JsonConvertController($scope, $http) {

  $scope.displayTable = true;

  $http.get('data.json').success(function(data) {
    $scope.jsonContent = data;
  });

  $scope.convertJsonToServiceValues = function() {
    $scope.resultJson = [];
    $scope.resultValues = [];

    angular.forEach($scope.jsonContent[0].types, function(types) {
      $scope.resultJson.push({
        typeName: types.name,
      });

      angular.forEach(types.domainTypes.codedValues, function(type) {
        $scope.resultValues.push({
          typeName: types.name,
          values: type.name
        });
      });
    });
  };
}

Sample JSON looks like, [Exact code is in plunker]

[{
"version": 0.01,
"types": [{
"id": 1,
"name": "Type1",
"domainTypes": {
  "type": "codedValue01",
  "codedValues": [{
    "name": "Type1Code1",
    "code": "t1c1"
  }, {
    "name": "Type1Code2",
    "code": "t1c2"
  }, {
  ...
  ...
  ...
  }]
 }
}, {
"id": 2,
"name": "Type2",
"domainTypes": {
  "type": "codedValue02",
  "codedValues": [{
    "name": "Type2Code1",
    "code": "t2c1"
  }, {
    "name": "Type2Code2",
    "code": "t2c2"
  }, {
  ...
  ...
  }]
 }
}]

So, the output is coming like the below:

Types   Values
Type1   Type1Code1 , Type1Code2 , Type1Code3 , Type1Code4 , Type1Code5 , 
        Type1Code6 , Type1Code7 , Type1Code8 , Type1Code9
Type2   Type2Code1 , Type2Code2 , Type2Code3 , Type2Code4 , Type2Code5
Type3   Type3Code1
Type4   Type4Code1 , Type4Code2 , Type4Code3 , Type4Code4 , Type4Code5

Problem: End of each value, I'm getting an extra space. Meant Type1Code1 , after 1 and ,, I'm getting the space.

I don't need that. How can I remove/trim that?

I tried <span>{{type.values}}</span> instead of <span ng-bind="type.values"></span>, but got the same result.

I manually set trim() like, <span ng-bind="trimContent(type.values)"></span> and in the controller, define the function

$scope.trimContent = function (content) {
    return content.trim();
};

This also not works.

Since I don't have any extra space in the JSON content. What is the issue?

How can I get the comma separated values without extra space in end of each value?

For better result, I added my code in the Plunker

2
  • 1
    Can you show the output HTML? Commented Jun 18, 2015 at 6:11
  • It's already exist in the question. After the So, the output is coming like the below: or you can see in the plunker Commented Jun 18, 2015 at 6:12

1 Answer 1

2

Newlines in HTML count as a space. Just chain the spans together without spaces between them

<span ng-repeat="type in resultValues | filter: {typeName: types.typeName}"><span ng-bind="type.values"></span><span ng-show="!$last">, </span></span>

http://plnkr.co/edit/ybTEO8AvgU3XaN7tsRqT?p=preview


Alternatively, you could use this answer and avoid the ngRepeat entirely

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.