jQuery를 사용하여 JSON 트리를 검색하는 방법

jQuery를 사용하여 JSON 트리를 검색하는 방법

JSON에서 구체적인 정보를 검색하는 것에 대해 질문이 있습니다.예를 들어 다음과 같은 JSON 파일이 있습니다.

 {
    "people": {
        "person": [
            {
                "name": "Peter",
                "age": 43,
                "sex": "male"
            }, {
                "name": "Zara",
                "age": 65,
                "sex": "female"
            }
        ]
    }
}

질문입니다. 어떻게 하면 특정 사람의 이름을 찾아 jQuery로 그 사람의 나이를 표시할 수 있을까요?예를 들어 JSON에서 Peter라는 사람을 검색하고 일치하는 사람을 찾으면 해당 일치(이 경우 Peter라는 사람에 대한 추가 정보(예: 나이)를 표시합니다.

var json = {
    "people": {
        "person": [{
            "name": "Peter",
            "age": 43,
            "sex": "male"},
        {
            "name": "Zara",
            "age": 65,
            "sex": "female"}]
    }
};
$.each(json.people.person, function(i, v) {
    if (v.name == "Peter") {
        alert(v.age);
        return;
    }
});

예.

이 답변을 바탕으로 다음과 같은 것을 사용할 수 있습니다.

$(function() {
    var json = {
        "people": {
            "person": [{
                "name": "Peter",
                "age": 43,
                "sex": "male"},
            {
                "name": "Zara",
                "age": 65,
                "sex": "female"}]
        }
    };
    $.each(json.people.person, function(i, v) {
        if (v.name.search(new RegExp(/peter/i)) != -1) {
            alert(v.age);
            return;
        }
    });
});

예 2

ifaour의 jQuery.each()의 예가 도움이 된다는 것을 알게 되었습니다만, 찾고 있는 것을 발견한 시점에서 false를 반환함으로써 jQuery.each()가 파손될 수 있습니다(즉, 정지됩니다).

$.each(json.people.person, function(i, v) {
        if (v.name == "Peter") {
            // found it...
            alert(v.age);
            return false; // stops the loop
        }
});

Jsel - https://github.com/dragonworx/jsel (완전 공개를 위해 저는 이 라이브러리의 소유자입니다)를 사용할 수 있습니다.

실제 XPath 엔진을 사용하여 커스터마이즈가 용이합니다.Node.js와 브라우저 모두에서 실행됩니다.

질문하신 분들의 이름은 다음과 같습니다.

// include or require jsel library (npm or browser)
var dom = jsel({
    "people": {
        "person": [{
            "name": "Peter",
            "age": 43,
            "sex": "male"},
        {
            "name": "Zara",
            "age": 65,
            "sex": "female"}]
    }
});
var person = dom.select("//person/*[@name='Peter']");
person.age === 43; // true

항상 같은 JSON 스키마를 사용하는 경우 jsel을 사용하여 자체 스키마를 만들고 다음과 같은 짧은 식을 사용할 수 있습니다.

dom.select("//person[@name='Peter']")

JSON을 JavaScript 객체에 로드하면 jQuery 문제가 아니라 JavaScript 문제입니다.JavaScript에서는 예를 들어 다음과 같은 검색을 작성할 수 있습니다.

var people = myJson["people"];
var persons = people["person"];
for(var i=0; i < persons.length; ++i) {
    var person_i = persons[i];
    if(person_i["name"] == mySearchForName) {
        // found ! do something with 'person_i'.
        break;
    }
}
// not found !

다음과 같이 $.grep()를 사용하여 json 객체 배열에서 검색할 수 있습니다.

var persons = {
    "person": [
        {
            "name": "Peter",
            "age": 43,
            "sex": "male"
        }, {
            "name": "Zara",
            "age": 65,
            "sex": "female"
        }
      ]
   }
};
var result = $.grep(persons.person, function(element, index) {
   return (element.name === 'Peter');
});
alert(result[0].age);

도움이 되는 js 라이브러리가 몇 가지 있습니다.

• JSONPath(JSON-Structures의 XPath 등) - http://goessner.net/articles/JsonPath/
• JSONQuery - https://github.com/JasonSmith/jsonquery
• GROQ - https://github.com/sanity-io/GROQ

또한 JSON Document Store로 브라우저에서 작동하며 모든 종류의 쿼리 메커니즘이 있는 Ronechair도 살펴보실 수 있습니다.

Defiant 사용 가능JS(http://defiantjs.com) - "search" 메서드로 글로벌 객체 JSON을 확장합니다.이를 통해 JSON 구조에 대한 XPath 쿼리를 쿼리할 수 있습니다.예:

var byId = function(s) {return document.getElementById(s);},
data = {
   "people": {
      "person": [
         {
            "name": "Peter",
            "age": 43,
            "sex": "male"
         },
         {
            "name": "Zara",
            "age": 65,
            "sex": "female"
         }
      ]
   }
},
res = JSON.search( data, '//person[name="Peter"]' );

byId('name').innerHTML = res[0].name;
byId('age').innerHTML = res[0].age;
byId('sex').innerHTML = res[0].sex;

여기 작동 중인 바이올린이 있습니다.
http://jsfiddle.net/hbi99/NhL7p/

    var GDNUtils = {};

GDNUtils.loadJquery = function () {
    var checkjquery = window.jQuery && jQuery.fn && /^1\.[3-9]/.test(jQuery.fn.jquery);
    if (!checkjquery) {

        var theNewScript = document.createElement("script");
        theNewScript.type = "text/javascript";
        theNewScript.src = "http://code.jquery.com/jquery.min.js";

        document.getElementsByTagName("head")[0].appendChild(theNewScript);

        // jQuery MAY OR MAY NOT be loaded at this stage


    }
};



GDNUtils.searchJsonValue = function (jsonData, keytoSearch, valuetoSearch, keytoGet) {
    GDNUtils.loadJquery();
    alert('here' + jsonData.length.toString());
    GDNUtils.loadJquery();

    $.each(jsonData, function (i, v) {

        if (v[keytoSearch] == valuetoSearch) {
            alert(v[keytoGet].toString());

            return;
        }
    });



};




GDNUtils.searchJson = function (jsonData, keytoSearch, valuetoSearch) {
    GDNUtils.loadJquery();
    alert('here' + jsonData.length.toString());
    GDNUtils.loadJquery();
    var row;
    $.each(jsonData, function (i, v) {

        if (v[keytoSearch] == valuetoSearch) {


            row  = v;
        }
    });

    return row;



}

비슷한 조건과 특정 오브젝트 속성에 한정되지 않는 검색 쿼리를 가지고 있습니다(예를 들어 "John" 검색 쿼리는 first_name 및 last_name 속성과 일치해야 합니다).몇 시간 후 구글의 Angular 프로젝트에서 이 기능을 얻었습니다.그들은 가능한 모든 사건들을 처리했다.

/* Seach in Object */

var comparator = function(obj, text) {
if (obj && text && typeof obj === 'object' && typeof text === 'object') {
    for (var objKey in obj) {
        if (objKey.charAt(0) !== '$' && hasOwnProperty.call(obj, objKey) &&
                comparator(obj[objKey], text[objKey])) {
            return true;
        }
    }
    return false;
}
text = ('' + text).toLowerCase();
return ('' + obj).toLowerCase().indexOf(text) > -1;
};

var search = function(obj, text) {
if (typeof text == 'string' && text.charAt(0) === '!') {
    return !search(obj, text.substr(1));
}
switch (typeof obj) {
    case "boolean":
    case "number":
    case "string":
        return comparator(obj, text);
    case "object":
        switch (typeof text) {
            case "object":
                return comparator(obj, text);
            default:
                for (var objKey in obj) {
                    if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) {
                        return true;
                    }
                }
                break;
        }
        return false;
    case "array":
        for (var i = 0; i < obj.length; i++) {
            if (search(obj[i], text)) {
                return true;
            }
        }
        return false;
    default:
        return false;
}
};

JavaScript를 사용하여 JSON 오브젝트 트리의 모든 노드 트래버스

jQuery를 사용할 필요가 없습니다.플레인 JavaScript면 됩니다.XML 표준을 JavaScript에 포팅하는 라이브러리는 추천하지 않습니다.다른 솔루션이 없다는 사실에 실망하여 직접 라이브러리를 작성했습니다.

JSON과 함께 작업하기 위해 regex를 조정했습니다.

먼저 JSON 개체를 문자열화합니다.그런 다음 일치하는 서브스트링의 시작과 길이를 저장해야 합니다.예를 들어 다음과 같습니다.

"matched".search("ch") // yields 3

JSON 문자열의 경우, 이것은 완전히 동일하게 동작합니다(쉼표와 괄호를 명시적으로 검색하지 않는 한). 이 경우 정규식을 수행하기 전에 JSON 개체의 사전 변환을 권장합니다(예: think :, {, }).

다음으로 JSON 개체를 재구성해야 합니다.내가 작성한 알고리즘은 일치 인덱스에서 반복적으로 뒤로 이동함으로써 JSON 구문을 검출함으로써 이를 실현합니다.예를 들어 의사 코드는 다음과 같습니다.

find the next key preceding the match index, call this theKey
then find the number of all occurrences of this key preceding theKey, call this theNumber
using the number of occurrences of all keys with same name as theKey up to position of theKey, traverse the object until keys named theKey has been discovered theNumber times
return this object called parentChain

이 정보를 사용하여 regex를 사용하여 JSON 개체를 필터링하여 키, 값 및 부모 개체 체인을 반환할 수 있습니다.

제가 작성한 라이브러리와 코드는 http://json.spiritway.co/ 에서 보실 수 있습니다.

언급URL : https://stackoverflow.com/questions/5288833/how-to-search-json-tree-with-jquery