发表新帖
发表新帖

Filtering JSON data

后端 未结
关注
8 459
暖寄归人
暖寄归人 2020-12-24 08:59

I have a JSON file which contains data like the following:

{\"posts\": [ 
    { \"title\":\"1\", \"url\":\"n1.png\" }, 
    { \"title\":\"2\", \"url\":\"n2.p
相关标签:
8条回答
  • 感情败类
    2020-12-24 09:34

    Read the json into an object/arr the parseJson function of jquery(http://api.jquery.com/jQuery.parseJSON/) and the try to splice the array using the splice function() Just make a copy of the object and splice that one.

    0 讨论(0)
  • 闹比i
    2020-12-24 09:40 
    json data array of objects filter



 <html>
    <head>
    <script type="text/javascript">
    /*
        var ss = JOSN.stringify(obj,function(key,value){ //serialization
            if(key=='a'){
                return undefined;
            }else{
                return value;
            }
        });
    */
    var jsonStr = [
    {
    "name": "Bang Bang",
    "outline": "A chance encounter with a mysterious charmer leads to a bank employee's wild adventure.",
    "rating": 5.6,
    "director": "Siddharth Anand",
    "id": 250
    },
    {
    "name": "Bang Bang",
    "outline": "A chance encounter with a mysterious charmer leads to a bank employee's wild adventure.",
    "rating": 5.6,
    "director": "Siddharth Anand",
    "id": 250
    },
    {
    "name": "Bang Bang",
    "outline": "A chance encounter with a mysterious charmer leads to a bank employee's wild adventure.",
    "rating": 5.6,
    "director": "Siddharth Anand",
    "id": 250
    },
    {
    "name": "Indian",
    "outline": "After his daughter's tragic death, a freedom fighter steps up his war against corruption.",
    "rating": 8.4,
    "director": "Shankar",
    "id": 251
    },
    {
    "name": "Dilwale Dulhania Le Jayenge",
    "outline": "Raj and Simran meet on a trip to Europe. After some initial misadventures, they fall in love. The battle begins to win over two traditional families.",
    "rating": 8.4,
    "director": "Aditya Chopra",
    "id": 253
    }
    ];



    var jsonobj = jsonStr;
    function filterMovieDirectorData(movie,director){
        if(movie!='' && (director!='' && director!='Director')){
            var data = jsonobj.filter(function(item){
            return (item["name"].toLowerCase().indexOf(movie.toLowerCase())!=-1 && item["director"].toLowerCase().indexOf(director.toLowerCase())!=-1)
            });
        }else if(movie!='' && director=='Director'){
            var data = jsonobj.filter(function(item){
            return item["name"].toLowerCase().indexOf(movie.toLowerCase())!=-1
            });
        }else if(movie=='' && (director!='' && director!='Director')){
            var data = jsonobj.filter(function(item){
            return item["director"].toLowerCase().indexOf(director.toLowerCase())!=-1
            });
        }

    return data;
    }


    function getFilterDirectorJson(){

        var inputStr = document.getElementById("movie").value;
        var e = document.getElementById("director");
        var directorStr = e.options[e.selectedIndex].text;

        if( (inputStr=='' || inputStr=='Enter movie name') && (directorStr=='' || directorStr=='Director') ){
            alert("Please enter movie name or select director.");
            document.getElementById("filter_data_div").innerHTML="";
            document.getElementById("movie").focus();
            return false;
        }

        var filterObjs = filterMovieDirectorData(inputStr,directorStr); 
        var text="";    
        for(var i=0; i<filterObjs.length; i++){
            text+='<div id="filter_data"><div><h3>'+filterObjs[0].name+'</h3></div>';
            text+='<div>Director : '+filterObjs[0].director+'</div></div><div class="clear"></div>';
        } 
    if(filterObjs.length===0){document.getElementById("filter_data_div").innerHTML='<div id="filter_data"><div><h3>No movies found.</h3></div></div>';}else
    document.getElementById("filter_data_div").innerHTML=text;

    }

    window.onload=function(){   
    getDirectors();
    }

    function getDirectors(){
        for(var i=0; i<jsonobj.length; i++){
            //console.log(jsonobj[i].director);
            var option = document.createElement("option");
            option.text = jsonobj[i].director;
            option.value = i;
            var daySelect = document.getElementById('director');
            daySelect.appendChild(option);      
        }
    }

    </script>
    <style>
    #director{
    line-height: 3px;
    padding: 20px;
    font-size: 21px;
    color: #acacac;
    }
    #go{
    background: #FFC000;
    padding: 11px 14px 16px 11px;
    font-size: 36px;
    line-height: 3;
    color: #fff;
    margin: 0px;
    text-align: center;
    }
    #movie{
    width: 213px;
    font-size: 21px;
    margin-left: 12px;
    padding: 20px;
    color:#ACACAC;
    }
    #main_div{
    background: #EEEEEE;
    width: 554px;
    min-height:120px;
    }
    #filter_data{
    width: 335px;
    background: #D8D8D8;
    padding: 1px 0px 20px 13px;
    margin: 20px 0px 0px 12px;
    border: 1px solid #000;
    }
    a{text-decoration:none;}
    .clear{clear: both;}
    </style>
    </head>
    <body>

    <div id="main_div">
    <div style="display:block;">
    <input type="text" id="movie" placeholder="Enter movie name">
    <select id="director" ><option value="">Director</option></select>
    <a href="javascript:;" id="go" onclick="getFilterDirectorJson(event)">Go</a>
    </div>
    <div id="filter_data_div"></div>
    </div>
    </body>
    </html>
    0 讨论(0)
 看不清?
提交回复
热议问题