Functonal programming with lodash

by Warwick Grigg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.min.js"></script>
<div id="app">
<p>j1 <textarea v-model="json1" rows="5" placeholder="j1 json"></textarea>
j2 <textarea v-model="json2" rows="5" placeholder="j2 json"></textarea>
j3 <textarea v-model="json3" rows="5" placeholder="j3 json"></textarea></p>
<p>Expression <input v-model="expression" placeholder="expression"></p>
  <pre>result: {{lo | json}}</pre>
  <pre>{{$data | json}}</pre>
</div>

JavaScript

function evalWithVars(js, vars) {
  try {
		eval("with (vars) {var result = (" + js + ")}");
	} catch(err) {
  	result = null;
  }
  return result;
};
var jsonParse = function(json) {
  var j;
  try {
    j = JSON.parse(json);
  } catch(err) {
    j = null;
  }
  return j;
}

console.log(evalWithVars('x', {x: 'xx'}));

App = new Vue({
  el: '#app',
  data: {
    json1: '[1,2,3]',
    json2: null,
    json3: null,
    expression: '_.drop(j1)'
  },
  computed: {
  	lo: function() {
    	return evalWithVars(this.expression+'', this);
    },
  	j1: function() {
	    return jsonParse(this.json1);
    },
    j2: function() {
	    return jsonParse(this.json2);
    },
    j3: function() {
	    return jsonParse(this.json3);
    }
  }
});