Programing

jQuery로 JSON 트리를 검색하는 방법

lottogame 2020. 11. 4. 07:35
반응형

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 !

"search"메소드로 전역 객체 JSON을 확장하는 DefiantJS ( http://defiantjs.com )를 사용할 수 있습니다 . 이를 사용하여 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/

다음과 같이 $ .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 라이브러리가 있습니다.

또한 브라우저에서 작동하고 모든 종류의 쿼리 메커니즘이있는 JSON 문서 저장소 인 Lawnchair를 살펴볼 수도 있습니다 .

    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;



}

I have kind of similar condition plus my Search Query not limited to particular Object property ( like "John" Search query should be matched with first_name and also with last_name property ). After spending some hours I got this function from Google's Angular project. They have taken care of every possible cases.

/* 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;
}
};

Traverse all the Nodes of a JSON Object Tree with JavaScript

You don't have to use jQuery. Plain JavaScript will do. I wouldn't recommend any library that ports XML standards onto JavaScript, and I was frustrated that no other solution existed for this so I wrote my own library.

I adapted regex to work with JSON.

First, stringify the JSON object. Then, you need to store the starts and lengths of the matched substrings. For example:

"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

이 정보를 사용하면 정규식을 사용하여 JSON 개체를 필터링하여 키, 값 및 상위 개체 체인을 반환 할 수 있습니다.

http://json.spiritway.co/ 에서 내가 작성한 라이브러리와 코드를 볼 수 있습니다.

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

반응형

'Programing' 카테고리의 다른 글

중복 된 Java 런타임 옵션 : 선호하는 순서는 무엇입니까?  (0) 2020.11.04
웹 사이트 용 Apple Touch 아이콘  (0) 2020.11.04
자바 : org.w3c.dom.Document의 모든 요소를 ​​반복하는 가장 효율적인 방법?  (0) 2020.11.04
클래스가 정의되었는지 어떻게 확인합니까?  (0) 2020.11.04
Sublime Text 2가 시작될 때 마지막으로 열린 파일 / 프로젝트를 열지 못하게하는 방법  (0) 2020.11.04

'Programing'의 다른글

  • 현재글jQuery로 JSON 트리를 검색하는 방법

관련글

댓글

티스토리툴바