Removing and shattering data from a JSON file at a designated location in AngularJS

Question

Removing and shattering data from a JSON file at a designated location in AngularJS

I have received json data that is structured like this (and unfortunately cannot be modified):

Desc: First data - Second data

My current method of displaying this data involves using the following code:

<div ng-repeat="b in a.Items">{{b.Desc}}</div>

However, I need to show 'Second data' below 'First data' without the hyphen separating them.

Currently, the display looks like this:

<div>First data - Second data</div>

But I require it to be displayed as:

<div><p>First data</p><p>Second data</p></div>

or

<div>First data<br/>Second data</div>

Is there an option or filter within angularjs that can help me achieve this formatting by breaking the string and removing the hyphen?

javascript json angularjs

Answer 1

Answer №1

Utilize the $filter para separar o ângulo. É importante ter cuidado em casos onde a string não contém o caractere "-". Por isso, é recomendado o uso do $filter

var app = angular.module("App", []);
app.controller('AppController', function($scope) {
   $scope.a = {Items:["XX-BBB", "CCC-AAA", "-VVV", "FFF-"]};
}).filter('splitValue', function() {
    var indexAllItens = 0;
    return function(input, index) {
       console.log(input + ' ' + index)
        var data = input.split('-'), str = '';
        if(data.length >= index)
            str = data[index];
        return str;
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
  <ul ng-repeat="b in a.Items">
     <li>{{b | splitValue:0}}</li> <li>{{b | splitValue:1}}</li>
  </ul>
</div>

Answer 2

Utilize the $filter para separar o ângulo. É importante ter cuidado em casos onde a string não contém o caractere "-". Por isso, é recomendado o uso do $filter

var app = angular.module("App", []);
app.controller('AppController', function($scope) {
   $scope.a = {Items:["XX-BBB", "CCC-AAA", "-VVV", "FFF-"]};
}).filter('splitValue', function() {
    var indexAllItens = 0;
    return function(input, index) {
       console.log(input + ' ' + index)
        var data = input.split('-'), str = '';
        if(data.length >= index)
            str = data[index];
        return str;
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
  <ul ng-repeat="b in a.Items">
     <li>{{b | splitValue:0}}</li> <li>{{b | splitValue:1}}</li>
  </ul>
</div>

Answer 3

Answer №2

To effectively tackle this issue, the recommended approach is to convert your data in the controller and then link the converted data to the scope.

However, if you're looking for a quick fix, you can try this:

<div><p>{{ b.Desc.split(' - ')[0] }}</p><p>{{ b.Desc.split(' - ')[1] }}</p></div>

Answer 4

To effectively tackle this issue, the recommended approach is to convert your data in the controller and then link the converted data to the scope.

However, if you're looking for a quick fix, you can try this:

<div><p>{{ b.Desc.split(' - ')[0] }}</p><p>{{ b.Desc.split(' - ')[1] }}</p></div>

Removing and shattering data from a JSON file at a designated location in AngularJS

Answer №1

Answer №2

Similar questions

Learn the process of submitting tag values using JohMun/vue-tags-input feature

Tips for sequentially calling multiple await functions within a for loop in Node.js when one await is dependent on the data from another await

Use the CSS class

Best practices for handling multiple tables in AngularJS HTML

Struggling with serving static content on NodeJS using Express.js

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

What is the best way to extract a thumbnail image from a video that has been embedded

What is causing this code to keep iterating endlessly?

Dividing a set of information using Ajax

You have attempted to make an invalid hook call in the react chat app. Hooks can only be called within the body of a function component

"Confusion arises when handling undefined arguments within async.apply in the context of async

Easily transfer files without the need to refresh the page by utilizing the power of AJAX

Display or conceal component based on specific URL in React.js navigation bar

Issue with Nodemailer OAuth2 2LO authentication when deployed on Heroku

What alternative methods are available to rename a field that has been returned in mongoose, if at all possible?

Tips for adding a "return" button to a page loaded with AJAX

typescript defining callback parameter type based on callback arguments

Simple method for securing and unsecuring uploaded files in a directory with the use of AngularJS and a PHP framework

It is essential for each child in a list to be assigned a unique "key" prop to ensure proper rendering, even after the key has been assigned (in Next

Implementing PHP echo alerts using Javascript