oliverbusk
3 months ago
195
10
Vue

Vue - parse JSON string

Posted 3 months ago by oliverbusk

Hi all

I am trying to parse a JSON string that my Laravel application serves to my Vue view. The JSON string can look like this:

{  
   "1":[  
      {  
         "row":"Some text here on first column."
      },
      {  
         "row":"And more text. Second row."
      },
      {
         "row":"Text!"
      }
    
   ],
   "2":[  
      {  
         "row":"2nd column text."
      },
      {  
         "row":""
      }
   ],
   "3":[  
      {  
         "row":"Even more text. But on the third column."
      }
   ]
}

Things to note here:

  1. The "1", "2", and "3" refers to columns. So in above examples, I have 3 columns.
  2. Each "row" refers to a row within the column.

I am trying to parse the string as a table, like: https://jsfiddle.net/59bz2hqs/1/.

This is what I have now:

<template>
    <div>
      <table>
          <tbody>
              <tr v-for="row in this.content">
                 <td>{{row}}</td>
               </tr>
           </tbody>
      </table>
   <div>
</template>

<script>
    export default {
        data() {
            return {
  
                content: []
            }
        },
        created() {
            Event.$on("document-was-processed", content => {
                this.content = content;          
            });
        }
    }

</script>

Now above simply prints out the actual JSON string. Can anyone help me out on how to actually parse the content?

Thanks!

Please sign in or create an account to participate in this conversation.