[FIXED] how to render only a certain set of data in a sub-array with VueJS

Issue

I have this problem where i have a set of JSON format files that look like this :

{ 
"_id" : "name_id", 
"apkMode" : "SCROLL", 
"date" : "2022-04-25", 
"timestamp" : NumberLong(16551858512), 
"user" : "name", 
"interactions" : [
    {
        "interactionTimestamp" : NumberLong(1650912989260), 
        "subject" : "ROBOT", 
        "type" : "selfEvaluationQuestion", 
        "text" : "test selfEvaluationQuestion"
    }, 
    {
        "interactionTimestamp" : NumberLong(1650913013738), 
        "subject" : "HUMAN", 
        "type" : "selfEvaluationAnswer", 
        "text" : "test selfEvaluationAnswer"
    }, 
    {
        "interactionTimestamp" : NumberLong(1650913022948), 
        "subject" : "ROBOT", 
        "type" : "newsCore", 
        "text" : "test newsCore"
    }, 

and so on. each users have a varying number of interactions arrays and they can all contain a different type of data. In a VueJS table, i need to cycle in every array and if the type of data is correct , display it in this cell. however, I am unable to find a working solution. I tried to use v-for with a v-if (I know it is not optimal but this just does not work

            <td>
              <span
                v-for="(interactions, index) in interactions"
                :key="index"
              >
                <p v-if="(sessions.interactions[index].type = 'newsCore')">
                  {{ sessions.interactions[index].text }}
                </p>
              </span>
            </td>

but this does not show anything, and I have the same result with computed properties.

Solution

Observations :

• You are doing iteration directly on interactions array which is not correct as it should be accessed via userObj.interactions.

  v-for="(interaction, index) in userObj.interactions"
  

• Instead of comparison operator, You are using assignment operator inside v-if which is also not correct. It should be :

  v-if="interaction.type === 'newsCore'"
  

Live Demo :

new Vue({
  el: '#app',
  data: {
    userObj: { 
      "_id" : "name_id", 
      "apkMode" : "SCROLL", 
      "date" : "2022-04-25", 
      "timestamp" : '16551858512', 
      "user" : "name", 
      "interactions" : [
        {
          "interactionTimestamp" : '1650912989260', 
          "subject" : "ROBOT", 
          "type" : "selfEvaluationQuestion", 
          "text" : "test selfEvaluationQuestion"
        }, 
        {
          "interactionTimestamp" : '1650913013738', 
          "subject" : "HUMAN", 
          "type" : "selfEvaluationAnswer", 
          "text" : "test selfEvaluationAnswer"
        }, 
        {
          "interactionTimestamp" : '1650913022948', 
          "subject" : "ROBOT", 
          "type" : "newsCore", 
          "text" : "test newsCore"
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr>
      <th>Interaction Type</th>
    </tr>
    <tr>
      <td>
        <span
              v-for="(interaction, index) in userObj.interactions"
              :key="index"
              >
          <p v-if="interaction.type === 'newsCore'">
            {{ interaction.text }}
          </p>
        </span>
      </td>
    </tr>
  </table>
</div>

Answered By - Rohìt Jíndal

Answer Checked By - Mildred Charles (PHPFixing Admin)