CODEWITHSUNDEEP
javascriptjquerycssajaxjson
Matthew Johnson
Matthew Johnson

Reputation: 21

How can I place seperate json objects from the same file in seperate divs with a single ajax call?

I am very new to ajax calls and jquery so I know that this is horribly wrong but I have three divs and I have multiple json files each with three objects in them. The objects are called ying, neutral or yang and I am trying to place the ying neutral and yang objects in their corresponding ying neutral and yang divs please show me how to rewrite my script to do what I would like it to do. I have searched the internet far and wide for a specific example of taking a single json file breaking it out into multiple divs but couldn't find anything.

Thank you for reading and for any suggestions you may have.

here is the html and css

<style>

        #categoryContainer{
            text-align:center;
            border: solid black 1px;
            margin-bottom: 20px;
            border-radius: 5px;
            padding-bottom:20px;
        }
        .category{
            display: inline-block;
            width:33%;
            box-sizing: border-box;
            border: solid black 1px;
            border-radius: 5px;
        }
        .foodBtnContainer{
            text-align:center;
        }
        .foodBtn{
        box-sizing: border-box;
        width: 24%;
        height: 56px;
        border-radius: 20px;
        box-shadow: none;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="categoryContainer">
        <h1>Categories</h1>
        <div class="category" id="ying"><h2>Ying</h2></div>
        <div class="category" id="neutral"><h2>Neutral</h2></div>
        <div class="category" id="yang"><h2>Yang</h2></div>
    </div>
    <div class="foodBtnContainer">
        <button class="foodBtn" id="vegetables" type="button">VEGETABLES</button>
        <button class="foodBtn" id="fruit" type="button">FRUIT</button>
        <button class="foodBtn" id="grains" type="button">GRAINS</button>
        <button class="foodBtn" id="beans" type="button">BEANS</button>
        <button class="foodBtn" id="nuts" type="button">NUTS</button>
        <button class="foodBtn" id="oils" type="button">OILS</button>
        <button class="foodBtn" id="spreads" type="button">SPREADS</button>
        <button class="foodBtn" id="sweeteners" type="button">SWEETENERS</button>
        <button class="foodBtn" id="seasonings" type="button">SEASONINGS</button>
        <button class="foodBtn" id="seaweed" type="button">SEAWEED</button>
        <button class="foodBtn" id="animal" type="button">ANIMAL</button>
        <button class="foodBtn" id="seafoodShellfish" type="button">SEAFOOD/SHELLFISH</button>
        <button class="foodBtn" id="supplementsHerbs" type="button">SUPPLEMENTS/HERBS</button>
        <button class="foodBtn" id="teaBeverages" type="button">TEA/BEVERAGES</button>
        <button class="foodBtn" id="alcohol" type="button">ALCOHOL</button>
    </div>

and here is a very rough pseudo-code of what I am trying to accomplish with my script

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#vegetables").click(function(){
                $.ajax({
                    dataType: "json",
                    url: "veggies.json",
                    data: 'json',
                    success: function{
                        if(object=="yang"){
                        .appendTo( "#yang" );
                        }
                        else if(object=="neutral"){
                        .appendTo( "#neutral" );
                        }
                        else if(object=="ying"){
                        .appendTo( "#ying" );
                        }

                    }
                });
                $("#vegetables").unbind('click');
            });
        });

and here is the json

ying{
    "one": "cranberries",
    "two": "cucumbers",
    "three": "dandelion greens"
}
neutral{
    "one": "alfalfa sprouts",
    "two": "arrow root",
    "three": "artichoke"
}
yang{
    "one": "plantains",
    "two": "plums",
    "three": "pomegranates"
}

Upvotes: 2

Views: 76

Answers (1)

Oli Soproni B.
Oli Soproni B.

Reputation: 2800

<style>

        #categoryContainer{
            text-align:center;
            border: solid black 1px;
            margin-bottom: 20px;
            border-radius: 5px;
            padding-bottom:20px;
        }
        .category{
            display: inline-block;
            width:33%;
            box-sizing: border-box;
            border: solid black 1px;
            border-radius: 5px;
        }
        .foodBtnContainer{
            text-align:center;
        }
        .foodBtn{
        box-sizing: border-box;
        width: 24%;
        height: 56px;
        border-radius: 20px;
        box-shadow: none;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="categoryContainer">
        <h1>Categories</h1>
        <div class="category" id="ying"><h2>Ying</h2></div>
        <div class="category" id="neutral"><h2>Neutral</h2></div>
        <div class="category" id="yang"><h2>Yang</h2></div>
    </div>
    <div class="foodBtnContainer">
        <button class="foodBtn" id="vegetables" type="button">VEGETABLES</button>
        <button class="foodBtn" id="fruit" type="button">FRUIT</button>
        <button class="foodBtn" id="grains" type="button">GRAINS</button>
        <button class="foodBtn" id="beans" type="button">BEANS</button>
        <button class="foodBtn" id="nuts" type="button">NUTS</button>
        <button class="foodBtn" id="oils" type="button">OILS</button>
        <button class="foodBtn" id="spreads" type="button">SPREADS</button>
        <button class="foodBtn" id="sweeteners" type="button">SWEETENERS</button>
        <button class="foodBtn" id="seasonings" type="button">SEASONINGS</button>
        <button class="foodBtn" id="seaweed" type="button">SEAWEED</button>
        <button class="foodBtn" id="animal" type="button">ANIMAL</button>
        <button class="foodBtn" id="seafoodShellfish" type="button">SEAFOOD/SHELLFISH</button>
        <button class="foodBtn" id="supplementsHerbs" type="button">SUPPLEMENTS/HERBS</button>
        <button class="foodBtn" id="teaBeverages" type="button">TEA/BEVERAGES</button>
        <button class="foodBtn" id="alcohol" type="button">ALCOHOL</button>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#vegetables").click(function(){

                $.ajax({
                    dataType: "json",
                    url: "veggies.json",
                    data: 'json',
                    type: 'GET',
                    success: function(data) {
                        // this will return a json object
                        // so i need to loop around
                        $.each(data, function(i, properties){
                            // i => index like ying, yang ,neutral
                            // since properties also is a object
                            $.each(properties, function(x, mydata) {
                                // x => index like one two three
                                // mydata => is value => cranberries
                                $('#' + i).append(mydata);    
                            }); 
                        })

                    }
                });
                $("#vegetables").unbind('click');
            });
        });
    </script>
</body>

and here is the veggies.json

{
    "ying": {
        "one": "cranberries",
        "two": "cucumbers",
        "three": "dandelion greens"
    },
    "neutral": {
        "one": "alfalfa sprouts",
        "two": "arrow root",
        "three": "artichoke"
    },
    "yang": {
        "one": "plantains",
        "two": "plums",
        "three": "pomegranates"
    }
}

and you need to put the html file same with the location of the veggies.json

hope it would give you idea on how to make it better according to what you need to accomplish

Upvotes: 1

Related Questions