AngularJS and JSON with multiline string

Question

I have organised my data in JSON file, which contains multi-line string, separated in the array. Like this:

[
    {
        "name": "1. Some Name",
        "id": "1",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
       ]
    },
    {
        "name": "2. Some Name",
        "id": "2",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
        ]
    }
]

Then in my view I want show text in description:

<ion-view view-title="">
<ion-content>
    <div class="card">
        <div class="item item-text-wrap" 
             ng-repeat="rule in rules | filter: { id: whichid }">
            {{ rule.description }}
        </div>
    </div>
</ion-content>

And my output look like this:

["Some long text 1","Some long text 2"]

How I can remove (or filter) that character '[' , '"' and ','?

Or if i use ng-bind-html="rule.description" directive i got:

Some long text 1 ,Some long text 2

Basically that is fine output, but they contain a comma ',' (which is in the array).

nikhil · Accepted Answer · 2016-09-18 12:13:56Z

1

You can also try Array.join() method.

Link: Array.join()

In your case: {{ rule.description.join(' ') }}

answered Sep 18, 2016 at 12:13

nikhil

1078 bronze badges

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

Comments

Hadi · Accepted Answer · 2016-09-18 12:11:26Z

1

try like this

 <div class="item item-text-wrap" 
         ng-repeat="rule in rules | filter: { id: whichid }">
        <span ng-repeat="d in rule.description">{{ d }}</span>
    </div>

answered Sep 18, 2016 at 12:11

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Comments

vr_driver · Accepted Answer · 2019-09-22 14:06:51Z

This gave me a lot of grief as well. However I solved it with a custom pipe. Do the research on making a pipe, but this should help:

pipes/arraytextfix/arraytextfix.ts (pipe file):

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Generated class for the ArraytextfixPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'arraytextfix',
})

export class ArraytextfixPipe implements PipeTransform {
  /**
   * This is a very important pipe, as it removes a joining
   * comma, as outlined on this page: https://stackoverflow.com/questions/39557436/angularjs-and-json-with-multiline-string
   */


  transform(value) { 
    value = value.join(' ');     
    return value
  } 
}

The other important thing, was adding that pipe file to the module of the file that you need to use it in.

For example:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProjectsPage } from './projects'; 
import { TranslateModule } from '@ngx-translate/core'; // For translations to work
import { ArraytextfixPipe } from "../../pipes/arraytextfix/arraytextfix" // ADD THIS

@NgModule({
  declarations: [
    ProjectsPage,
    ArraytextfixPipe // ADD THIS
  ],
  imports: [

    TranslateModule, // For translations to work
    IonicPageModule.forChild(ProjectsPage),
  ],
})
export class ProjectsPageModule {}

Then, (for me) you can then all the data in similar fashion, even using the translate pipe as well:

  <p [innerHTML]="'PROJECTS.BODY' | translate | arraytextfix"></p>

And this is basically my i18n/en.json data feed :

{
"PROJECTS": 
  {
    "HEADING": "Projects",
    "DESCRIPTION": "A default description",
    "BODY": ["bodytext line 1 <p>even has support for a paragraph</p>",
    "<p>Works well on line 2</p>",
    "line 3"]
  } 
}

I hope it helps a little

Collectives™ on Stack Overflow

AngularJS and JSON with multiline string

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related