lodashSandbox:findLastIndex

ES6 Enabled

by David McClelland

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div class="wrapper">
  <div class="title">
    <h3>
      _.findLastIndex
    </h3>
  </div>
  <div class="subtitle">
    <h4>
      return 0-based location of matching element starting from end of array
    </h4>
  </div>
  <div class="workspace">
    <textarea id='startInput' type='textarea' rows=5>[
  { "user": "barney",  "active": true },
  { "user": "fred",    "active": false },
  { "user": "pebbles", "active": false }
]</textarea>
    <label for="startInput">array to search</label>
<br />
    <div class="actionArea">
    <input id='searchTerm' type='text' value='fred' />
    <label for="searchTerm">search term</label>
      <button id="button1">findLastIndex</button>
      <br /><br />
      <input id='searchObject' type='text' value='active' /><br />
      <label for="searchObject">search object</label>
      <br /><br />
      <button id="button2">findLastIndex</button>
      <br /><br />
      <input id='searchProperty' type='text' value='pebbles' /><br />
      <label for="searchProperty">search property</label>
      <br /><br />
      <button id="button3">findLastIndex</button>
      <br />
    </div>
    <br />
    <textarea id="output" rows="2" value="output"></textarea>
  </div>
</div>

CSS

label {
  font-size: 12px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 500px;
}

.title,
.subtitle,
label {
  font-family: Helvetica;
  color: gray;
}

.workspace {
  display: flex;
  flex-direction: column;
}

.actionArea {
  border: 1px solid #EEEEEE;
  padding: 12px;
}

.actionArea button {
  width: 200px;
}

#output {
  font-family: Courier;
  font-size: 14px;
}

input {
  font-family: Courier;
  font-size: 14px;
  width: 400px;
}

#modValInput {
  font-family: Courier;
  font-size: 14px;
}

Babel + JSX

// find elements
let banner = document.getElementById("#playground");
let button = document.getElementById("button");
let startInput = document.getElementById('startInput');
let searchTerm = document.getElementById('searchTerm').value;
let searchObject = {};
let searchProperty = document.getElementById('searchProperty').value;
searchObject = {};
searchObject[document.getElementById('searchObject').value] = true;
let output = document.getElementById("output");

button1.onclick = () => {
  doOperation1();
}

button2.onclick = () => {
  doOperation2();
}

button3.onclick = () => {
  doOperation3();
}

function doOperation1() {
	let inputVal = JSON.parse(startInput.value);
  output.value = (_.findLastIndex(inputVal, function(o) { return o.user === searchTerm;}));
}

function doOperation2() {
	let inputVal = JSON.parse(startInput.value);
  output.value = (_.findLastIndex(inputVal, searchObject));
}

function doOperation3() {
	let inputVal = JSON.parse(startInput.value);
  output.value = (_.findLastIndex(inputVal, function(o) { return o.user === searchProperty;}));
}