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

modify web API response type

Transferring a Variable from Arduino to JavaScript

Can you provide steps on converting a Facebook response into a JSON formatted string?

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

unable to display data through the web service

"Unlocking the potential of AngularJS: A guide to accessing multiple controllers

Each time a page loads, the react useContext feature is causing the web socket connection to reset

Sending data from a JSP page to a JavaScript function

Creating sparse fieldset URL query parameters using JavaScript

What is the best way to combine the elements of two arrays within a v-for loop?

Error: It seems like Material UI has updated their export structure and now `makeStyles` is no longer available in the

The <select> element in AngularJS 1.5 is showing the dropdown at unexpected moments, but only on iOS 10 devices

Avoid including newline characters in the string returned from a curl response

How to quickly send data in AngularJS with only one button press

Utilize AJAX to accurately capture and handle error codes

Using Next.js to pass fetched data as props to components

I am looking to generate div elements using JavaScript to avoid the tedious task of individually creating numerous divs

What is causing .then() to not wait for the promise to resolve?

Display a div every 3 seconds with the help of jQuery

What is the best way to save a parsed JSON value to a variable in Express?