Berechnung des JSONPath

Question

ein ziemlich komplexes JSON-Objekt wie die, die ich habe unter der Annahme:

{ 
    "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" 
    }] 
} 

Gibt es irgendwelche Werkzeuge/Bibliotheken berechnen die JSONPath auf ein bestimmten Schlüssel/Wert-Paar?

Zum Beispiel: Der JSONPath zur dritten Datenzeile (streetAddress": "1 street") kann mit dem JSONPath $.address[0].streetAddress extrahiert werden.

Idealerweise möchte ich so etwas: calculateJSONPath(3) - wobei 3 der dritte Schlüssel ist, der von oben beginnt und diese Funktion $.address[0].streetAddress zurückgibt. Ich kann mir nicht vorstellen, dass da etwas sein wird, was genau das tut, aber ich muss irgendwo anfangen, wenn nicht von vorne.

Bearbeiten: Beispiel Anwendungsfall: Benutzer lädt eine JSON-Datei in meine Anwendung. Ich erlaube ihnen, bestimmte Schlüssel über meine Schnittstelle auszuwählen. Stellen Sie sich Kontrollkästchen neben jeder Taste vor. Als nächstes kann der Benutzer eine zweite JSON-Datei hochladen und sehen, ob die zuvor ausgewählten Schlüssel/Werte im zweiten JSON vorhanden sind.

Bearbeiten 2: Die Suche funktioniert nicht, da ich möchte, dass die vom Benutzer ausgewählten Schlüssel/Werte sich in der gleichen Hierarchie wie der erste JSON befinden. Beispiel: Wenn der Benutzer "1 a": "1 b" in der ersten JSON-Datei auswählt, muss die zweite JSON-Datei denselben Schlüssel/Wert in derselben verschachtelten Hierarchie haben. Hier

Answer 1

ist ein Geschmack von dem, was ich sagte (eine Checkbox, um meinen Standpunkt zu sehen):

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

Im Folgenden wird eine DOM-Struktur von dem mitgelieferten JSON erstellen. Es ist sehr rudimentär und es ist nur ein Beweis für das Konzept.

Sie müssen den Rest der Anwendung von dieser Grundlage erstellen.

Jedes Level (UL) hat einen Index und jedes Element (LI) einen Schlüssel.

//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>