计算 JSONPath

Question

假设我有一个相当复杂的 JSON 对象，如下所示：

{
  "firstName": "John",
  "address": [{
    "streetAddress": "1 street",
    "special": {
      "1 a": "1 b"
    }
  }, {
    "streetAddress": "2 naist street",
    "special": {
      "2 a": "2 b"
    }
  }],
  "phoneNumbers": [{
    "type": "iPhone",
    "number": "0123-4567-8888"
  }]
}

是否有任何tools/libraries可以计算JSON特定key/value对的路径？

例如：可以使用JSON路径$.address[0].streetAddress.

提取第三行数据(streetAddress": "1 street")的JSON路径

理想情况下我想要这样的东西：calculateJSONPath(3) - 其中 3 是从顶部开始的第 3 个键，这个函数将 return $.address[0].streetAddress。我不认为会有什么东西可以做到这一点，但我必须从某个地方开始，如果不是从头开始的话。

编辑：示例用例： 用户将 JSON 文件加载到我的应用程序中。我允许他们使用我的界面 select 特定键。想象一下每个键旁边的复选框。接下来，用户可以上传第二个 JSON 文件并查看之前 selected keys/values 是否出现在第二个 JSON.

中

编辑 2： 搜索将不起作用，因为我希望用户 key/values selected 位于与第一个JSON。例如：如果第一个 JSON 文件中的用户 selects "1 a": "1 b"，则第二个 JSON 文件必须在相同的嵌套层次结构中具有相同的 key/value。

Answer 1

以下是我所说的内容（勾选复选框以了解我的观点）：

var $ = {
  "firstName": "John",
  "address": [{
    "streetAddress": "1 street",
    "special": {
      "2 a": "2 a"
    }
  }, {
    "streetAddress": "2 naist street",
    "special": {
      "2 a": "2 a"
    }
  }],
  "phoneNumbers": [{
    "type": "iPhone",
    "number": "0123-4567-8888"
  }]
};


// the recursive function that create the structure
function createStructure(container, obj, path) {
  for(var key in obj) {
    var d = cd(key, path);
    if(typeof obj[key] == "object")
      createStructure(d, obj[key], path + "['" + key + "']");
    container.appendChild(d);
  }
}

// of course we call the function ...
createStructure(document.getElementById("preview"), $, "$");


// create a preview element (unimportant)
function cd(prop, path) {
  var d = document.createElement("div");
  var s = document.createElement("span");

  var i = document.createElement("input");
  i.setAttribute("data-path", path + "['" + prop +"']");
  i.onclick = check;
  i.type = "checkbox";
  s.appendChild(i);
 
  s.appendChild(document.createTextNode(prop));
  d.appendChild(s);
  return d;
}

// the event handler (unimportant)
function check(e) {
  if(e.target.checked)
    alert(e.target.getAttribute("data-path"));
}

div {
  padding: 5px;
  padding-left: 25px;
}

span {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

<div id="preview">
  <span><input type="checkbox" data-path="$"/>$</span>
</div>

Answer 2

下面将从提供的 JSON 创建一个 DOM-structure。它非常简陋，只是概念验证。

您将需要在此基础上构建应用程序的其余部分。

每个级别 (UL) 都有一个索引，每个项目 (LI) 都有一个键。

//rework JSON into a structure
function buildDOMFromJSON()
{
  var JSONString = document.querySelector("#uploadedJSON1").value;
  
  //you need to add a gazillion error checks
  var JSONcompiled = JSON.parse(JSONString);

  //test if array or object
  var start, isObject;
  if (JSONcompiled instanceof Array)
  {
      start = JSONcompiled;
      isObject = false;
  }
  else //is object
  {
     start = Object.keys(JSONcompiled); //create an array to start
     isObject = JSONcompiled;
  }
  
  loopJSONLevel(start, isObject, document.querySelector("#JSONstructure1 > ul"));
}

function loopJSONLevel(obj, isObject, level)
{
  //loop the array
  obj.forEach(function(element, index){
    var objectToEvaluate;
    if (isObject == false)
    {
      objectToEvaluate = element; 
    }
    else
    {
      objectToEvaluate = isObject[element];
    }

    //create a new level
    var newLevel = document.createElement("li");
    var newLevel2 = document.createElement("ul");
    if (objectToEvaluate instanceof Array)
    {
      //create a new level
      if (element instanceof Array)
      {
          newLevel2.setAttribute("data-path", index);
      }
      else
      {
          newLevel2.setAttribute("data-path", element);
      }      
      level.appendChild(newLevel2);
      loopJSONLevel(objectToEvaluate, false, newLevel2);
    }
    else if (Object.prototype.toString.call(objectToEvaluate) == "[object Object]")
    {
      //create a new level
      if (element instanceof Array)
      {
          newLevel2.setAttribute("data-path", index);
      }
      else
      {
          newLevel2.setAttribute("data-path", element);
      }
      newLevel2.setAttribute("data-path", index);
      level.appendChild(newLevel2);
      loopJSONLevel(Object.keys(objectToEvaluate), objectToEvaluate, newLevel2);
    }
    else
    {
      //draw the value
      level.appendChild(newLevel);
      newLevel.textContent = objectToEvaluate;
      newLevel.setAttribute("data-path", element);
    }
    
    
  });
}
buildDOMFromJSON()

<textarea id="uploadedJSON1">
  [{
  "firstName": "John",
  "address": [{
    "streetAddress": "1 street",
    "special": {
      "1 a": "1 b"
    }
  }, {
    "streetAddress": "2 naist street",
    "special": {
      "2 a": "2 b"
    }
  }],
  "phoneNumbers": [{
    "type": "iPhone",
    "number": "0123-4567-8888"
  }]
}]
  </textarea>

<div id="JSONstructure1">
  <ul>

  </ul>
  </div>

Answer 3

我用 Angular 做了同样的事情。

你可以看下面的例子:

https://davicvictor.github.io/jsonpath-ui/ 并打开您的控制台。

计算 JSONPath

Calculating the JSONPath

javascript

json

jsonpath