Use Lodash to Find Objects in an Array Matches an Id (Complex, Drilldown)

const myFiles = [  { id: 11, file: "Music", parentId: null },  { id: 12, file: "mp3", parentId: 11 },  { id: 14, file: "pop", parentId: 12 },  { id: 15, file: "theme.mp3", dateModified: "2015-03-01", size: 85,  parentId: 14 },  { id: 16, file: "rock", parentId: 12 },  { id: 17, file: "soft.mp3", dateModified: "2015-05-13", size: 98, parentId: 16 },  { id: 18, file: "else.txt", dateModified: "2015-03-03", size: 90, parentId: null },  { id: 21, file: "Documents", parentId: null },  { id: 2, file: "txt", parentId: 21 },  { id: 3, file: "todo.txt", dateModified: "2015-05-12", size: 0.7, parentId: 2 },  { id: 4, file: "pdf", parentId: 21 },  { id: 22, file: "map2.pdf", dateModified: "2015-05-21", size: 2.9, parentId: 4 },  { id: 5, file: "map.pdf", dateModified: "2015-05-21", size: 3.1, parentId: 4 },  { id: 6, file: "internet-bill.pdf", dateModified: "2015-05-12", size: 1.4, parentId: 4 },  { id: 7, file: "xls", parentId: 21 },  { id: 8, file: "compilation.xls", dateModified: "2014-10-02", size: 2.3, parentId: 7 },  { id: 9, file: "misc", parentId: 21 },  { id: 10,  file: "something.txt", dateModified: "2015-02-26", size: 0.4,  parentId: 9 }];
//example how to use the "<3" string - better way than using eval():const columnFilters = { file: "map", size: "<3.2" }; //, size: "<3" const isSizeValid = Function("return " + myFiles[11].size + "<3")();//console.log(isSizeValid);
const myObj = myFiles.reduce((aggObj, child) => {  aggObj[child.id] = child;  //the filtered data is used again as each subsequent letter is typed  //we need to delete the ._used property, otherwise the logic below  //in the while loop (which checks for parents) doesn't work:  delete aggObj[child.id]._used;  return aggObj;}, {});
function filterMyFiles(myArray, columnFilters){  const filteredChildren = myArray.filter(a => {    for (let key in columnFilters){      //console.log(key)            if (a.hasOwnProperty(key)){        const strContains =  String(a[key]).includes(columnFilters[key]);        const re = /(?:(?:^|[-+<>=_*/])(?:\s*-?\d+(\.\d+)?(?:[eE][+-<>=]?\d+)?\s*))+$/;        const comparison = re.test(columnFilters[key]) && Function("return " + a[key] + columnFilters[key])();        if (strContains || comparison){          //don't return true as need to check other keys in columnFilters        }else{          //console.log('false', a)          return false;        }      } else{        return false;      }               }    //console.log('true', a)    return true;  })  return filteredChildren;}
const initFiltered = filterMyFiles(myFiles, columnFilters);
const finalWithParents = initFiltered.map(child => {  const childWithParents = [child];  let parent = myObj[child.parentId];  while (parent){    //console.log('parent', parent)    parent._used || childWithParents.unshift(parent)    myObj[parent.id]._used = true;    parent = myObj[parent.parentId] || false;      }  return childWithParents;}).flat();
console.log(finalWithParents)

.as-console-wrapper { max-height: 100% !important; top: 0; }

How to create array of object from HTML Table in javascript?

Verified that you have the tbody node inside a table node. You can get the items with document.querySelectorAll("#metadata tr"):

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  const elements = document.querySelectorAll("#metadata tr");
  const result = Array.from(elements).map(tr => {
    const childs = tr.querySelectorAll("input");
    return {
      p1: childs[0].value,
      p2: childs[1].value
    };
  });

  console.log(result);
});

<table>
  <tbody id="metadata">
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
  </tbody>
</table>
<button>Get Data</button>

var obj = {
  prop1: 'prop1Value',
  prop2: 'prop2Value',
  child: {
    childProp1: 'childProp1Value',
  },
}
console.log(obj)

console.log('My object : ' + obj)

console.log('My object: ', obj);

data = [{    id: 1,    text: 'one',    children: [{        id: 1.1,        text: 'one point one',        children: [            {id: 123, text: 'blah'}        ]    }]}, {    id: 66,    children: [        {id: 123, text: 'blah'}    ]}];

let update = (id, text) => obj => {    if (obj.id === id)        obj.text = text;    else if (obj.children)        obj.children.forEach(update(id, text));};
data.forEach(update(123, 'hello'));
console.log(data);

function WordList({ words }) {
 return (
   <div>
     {
       words[0].spellingWords.map( word =>
          (<h1 key={word}>{word}</h1>)
        )
     }
   </div>
 );
}