Javascript 在角度过滤器上编辑要在html中的新行上的长json字符串时出错

我不熟悉编码，在我的html（使用Angular）中，我对来自数据库（Firebase）的json数据有以下调用：

我希望文本在每次出现“.”时都从新行开始，并创建了一个筛选器，该筛选器将生成一条错误消息

HTML是：

<p class="specificmovt">{{workout[0].cfhackney.week417.metcon.freetext|myFilter}}</p> 

错误消息是：

TypeError: Cannot read property 'replace' of undefined
    at http://localhost:8100/js/filters.js:5:17
    at fn (eval at <anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21972:15), <anonymous>:4:500)
    at regularInterceptedExpression (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23054:21)
    at Object.expressionInputWatch [as get] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22956:26)
    at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24502:40)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24778:24)
    at done (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19191:47)
    at completeRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19363:7)
    at XMLHttpRequest.requestLoaded (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19304:9)

TypeError:无法读取未定义的属性“replace”
在http://localhost:8100/js/filters.js:5:17
fn时（评估时）(http://localhost:8100/lib/ionic/js/ionic.bundle.js:21972:15), :4:500)
在正则表达式(http://localhost:8100/lib/ionic/js/ionic.bundle.js:23054:21)
at Object.expressionInputWatch[as get](http://localhost:8100/lib/ionic/js/ionic.bundle.js:22956:26)
在范围内。$摘要(http://localhost:8100/lib/ionic/js/ionic.bundle.js:24502:40)
在范围内。$apply(http://localhost:8100/lib/ionic/js/ionic.bundle.js:24778:24)
完成(http://localhost:8100/lib/ionic/js/ionic.bundle.js:19191:47)
完成任务时(http://localhost:8100/lib/ionic/js/ionic.bundle.js:19363:7)
在XMLHttpRequest.requestLoaded处(http://localhost:8100/lib/ionic/js/ionic.bundle.js:19304:9)

正如其他StackOverflow帖子所建议的，我已经尝试在JSON文件中添加\n和'br'标记来代替'.'来创建新行，但这不起作用

如果您能帮助我找到最有效的方法，将我的长JSON字符串放到新行或修复过滤器函数，我将不胜感激

谢谢。

您的错误：

TypeError: Cannot read property 'replace' of undefined

告诉您正在对不存在或更准确地说是未定义的对象调用replace方法

1. app.filter('myFilter', //this is a function which takes two arguments, a text string and then a function expression
    2. function(){ //this is another function which you are passing in as the second argument and is another scope
        3. return function(input){ //this is another function inside the previous function which you are passing an argument into as a variable(input).
            4. return input.replace(/\./g, '\n'); //you are performing actions on the argument you pass into the previous function. you have NAMED that argument input. However, you did not pass an actual argument to this function's scope. Therefore you are trying to .replace on something that is undefined.
         };
    });

我们需要看看输入的价值是什么。那就把它修好-D

复制错误并随后修复错误的小提琴：

---

关于您的过滤器，您应该在过滤器函数的开头检查

输入是否未定义，如果未定义则返回（因为
未定义
没有替换功能）

由于Angulars first
$digest
循环在数据可用之前运行，因此会使用undefined调用它

这应该起作用：

app.filter('myFilter',function(){
   return function(input){
       if(input == undefined){
           return;
       }
       return input.replace(/\./g, '\n');
   };
});    

如果要将“\n”用于换行符，则需要确保在周围元素上设置了
空白：pre
。这将使浏览器呈现换行符

我希望我能帮上忙：）
你能帮我控制台.log（输入）；在你返回的函数中？感谢Chris解决了这个问题-感谢。我不明白你为什么要使用正则表达式？Firebase是NoSQL，应该将json返回给您吗？嗨，Chris。返回了完整的json值——但我希望格式化它，并看到其他SO帖子使用了regex。仍在学习Angular/NoSQL DBs。谢谢你的帮助。我很想看看数据是如何返回的。必须有更好的方法来做到这一点。非常感谢v@vkluge在这方面的帮助，它提供了我所期待的结果！
TypeError: Cannot read property 'replace' of undefined

1. app.filter('myFilter', //this is a function which takes two arguments, a text string and then a function expression
    2. function(){ //this is another function which you are passing in as the second argument and is another scope
        3. return function(input){ //this is another function inside the previous function which you are passing an argument into as a variable(input).
            4. return input.replace(/\./g, '\n'); //you are performing actions on the argument you pass into the previous function. you have NAMED that argument input. However, you did not pass an actual argument to this function's scope. Therefore you are trying to .replace on something that is undefined.
         };
    });

app.filter('myFilter',function(){
   return function(input){
       if(input == undefined){
           return;
       }
       return input.replace(/\./g, '\n');
   };
});