[{"data":1,"prerenderedAt":126},["ShallowReactive",2],{"/2026/05/19-access-js-object-properties-with-string-and-reduce":3},{"id":4,"title":5,"body":6,"date":117,"description":38,"extension":118,"meta":119,"navigation":120,"path":121,"robots":122,"seo":123,"stem":124,"__hash__":125},"posts/2026/05/19 access-js-object-properties-with-string-and-reduce.md","19 Access Js Object Properties With String And Reduce",{"type":7,"value":8,"toc":114},"minimark",[9,18,21,25],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"access-javascript-object-properties-with-string-and-reduce","Access JavaScript Object Properties with String and Reduce",[19,20],"br",{},[22,23,24],"p",{},"In this case, I parsed a json file and need to query the object using a string and JavaScript can get one level down using Bracket notation.",[26,27,28,39,41,44,52,54,57,65,67,78,80,83,85,88,96,98,105,107],"code-block",{},[29,30,35],"pre",{"className":31,"code":33,"language":34},[32],"language-text","const theObject = {\n  topLevel: 0\n};\n\nconst topLevelValue = theObject[\"topLevel\"];\n\nconsole.log(topLevelValue); // will be 0\n","text",[36,37,33],"code",{"__ignoreMap":38},"",[19,40],{},[22,42,43],{},"However, bracket notation can't handle multiple levels:",[26,45,46],{},[29,47,50],{"className":48,"code":49,"language":34},[32],"const theObject = {\n  topLevel: {\n    firstLevel: 1\n  }\n};\n\nconst firstLevelValue = theObject[\"topLevel.firstLevel\"]; // Doesn't work\n",[36,51,49],{"__ignoreMap":38},[19,53],{},[22,55,56],{},"So, consult with Claude Sonnet and managed to use reduce to get it to work. I tried not to use JMESPath or JsonPath or other query libraries.",[26,58,59],{},[29,60,63],{"className":61,"code":62,"language":34},[32],"const theObject = {\n  topLevel: {\n    firstLevel: 1\n  }\n};\n\nfunction getValue(queryString) {\n  const keys = queryString.split('.');\n  const lastKey = keys.pop();\n  const lastObj = keys.reduce((acc, part, index) => {\n    const nextKey = keys[index + 1] !== undefined ? keys[index + 1] : lastKey;\n    if (acc[part] === undefined || acc[part] === null) {\n      acc[part] = {};\n    }\n    return acc[part];\n  }, theObject);\n\n  return lastObj[lastKey];\n}\n\nconst firstLevelValue = getValue(\"topLevel.firstLevel\");\n\nconsole.log(firstLevelValue); // will be 1\n",[36,64,62],{"__ignoreMap":38},[19,66],{},[22,68,69,70,77],{},"It works by turning \"topLevel.firstLevel\" into ",[36,71,76],{"className":72},[73,74,75],"bg-gray-200","p-2","rounded","theObject[topLevel][firstLevel]"," iteratively and it works for multiple level.",[19,79],{},[22,81,82],{},"Next, I need to handle array, so I can use \"topLevel.firstLevel.1.secondLevel\" to get the second element of firstLevel array and return the value of secondLevel property.",[19,84],{},[22,86,87],{},"It requires a small tweaked to the code above:",[26,89,90],{},[29,91,94],{"className":92,"code":93,"language":34},[32],"const theObject = {\n  topLevel: {\n    firstLevel: [\n      {\n        secondLevel: \"firstElement\"\n      },\n      {\n        secondLevel: \"secondElement\"\n      }\n    ]\n  }\n};\n\nfunction getValue(queryString) {\n  const keys = queryString.split('.');\n  const lastKey = keys.pop();\n  const lastObj = keys.reduce((acc, part, index) => {\n    const nextKey = keys[index + 1] !== undefined ? keys[index + 1] : lastKey;\n    if (acc[part] === undefined || acc[part] === null) {\n      acc[part] = isNaN(parseInt(nextKey)) ? {} : [];\n    }\n    return acc[part];\n  }, theObject);\n\n  return lastObj[lastKey];\n}\n\nconst secondLevelValue = getValue(\"topLevel.firstLevel.1.secondLevel\");\n\nconsole.log(secondLevelValue); // will be \"secondElement\"\n",[36,95,93],{"__ignoreMap":38},[19,97],{},[22,99,100,101],{},"Without the code change, it turns \"topLevel.firstLevel.1.secondLevel\" into ",[36,102,104],{"className":103},[73,74,75],"theObject[topLevel][firstLevel][\"0\"][secondLevel]",[19,106],{},[22,108,109,110],{},"With the change, basically, if it encounters a number, treat it as an array, so it turns \"topLevel.firstLevel.1.secondLevel\" into ",[36,111,113],{"className":112},[73,74,75],"theObject[topLevel][firstLevel][0][secondLevel]",{"title":38,"searchDepth":115,"depth":115,"links":116},2,[],"2026-05-19T00:00:00.000Z","md",{},true,"/2026/05/19-access-js-object-properties-with-string-and-reduce",null,{"title":5,"description":38},"2026/05/19 access-js-object-properties-with-string-and-reduce","5_zr7bBnp-IiD7qcJO8q-EwWXG5GRfrseUGuvpCf58I",1785167451362]