I'm getting weird behaviour and I'm stuck ;/

There's this array I have/use:

[
    {
        "Question": "business metrics",
        "Answers": "how well assistant ..."
    },
    {
        "Question": "technical metrics",
        "Answers": "how well is ..."
    },
    {
        "Question": "business metrics types",
        "Answers": "CSAT, coverage ..."
    },
    {
        "Question": "key metrics",
        "Answers": "precision, accuracy ..."
    }
]

which is generated by :

$json            = json_decode(file_get_contents('assets/feeds/questions.json'), 1);
$flattened_array = call_user_func_array('array_merge', $json);
$data            = json_encode($flattened_array, JSON_PRETTY_PRINT);

I include that data in Vue so I can dynamically filter on both Q and A. This only worked for the Q using the following code:

new Vue({
    el: '#app',
    data: {
        searchValue: '',
        courselines: <?php echo $data ?>        
    },
    computed: {
        filteredCourselines() {
            let tempCourselines = this.courselines;

            // Process search input
            if (!tempCourselines) {
                return [];
            }

            if (this.searchValue !== '' && this.searchValue) {

                return tempCourselines.filter(function (q) {
                    return q.Question.toLowerCase().indexOf(searchValue) >= 0;
                });

            } else {
                return [];
            }

        }
    }
});

However, I noticed as soon as I change Questions to Answers, or add it as an or operator, things stop working.

return tempCourselines.filter(function (q) {
return q.Answers.toLowerCase().indexOf(searchValue) >= 0 || q.Question.toLowerCase().indexOf(searchValue) >= 0;
});

It took me hours to figure out that when I replace the PHP echo by the hardcoded array data, all is just fine.

Here's the matching HTML block:

<div id="app" class="m-5">
            <div id="wrapper">
                <input type="text" v-model="searchValue" placeholder="Search Term" class="my-4" id="search-input"></input>
                <div id="courseline-container">
                    <div class="card p-2 m-2" v-for="(courseline, index) in filteredCourselines" :key="index">
                        <div class="content">
                            <span>
                                <p><strong>{{ courseline.Question }}</strong><br/>{{ courseline.Answers }}</p>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I don't understand why, does anybody have a clue?

EDIT:

I found out that the null value in some answers cause the error. I need to know how to run the filter without breaking on null values:

[
            {
                "Question": "business metrics",
                "Answers": "how well assistant ..."
            },
            {
                "Question": "technical metrics",
                "Answers": "how well is ..."
            },
            {
                "Question": "business metrics types",
                "Answers": "CSAT, coverage ..."
            },
            {
                "Question": "Scenarios",
                "Answers": null
            },
            {
                "Question": "key metrics",
                "Answers": "precision, accuracy ..."
            }
        ]

CodePudding user response：

Based on your comment, your actual data set potentially has null for some of the Answers properties, leading to an error at runtime.

You can use optional chaining (?.) to avoid the null error:

return tempCourselines.filter(function (q) {