How to save data that come from json using ajax

in this project i use jquery mobile.

The goal is to go only once to the server(where the json file) and store the information, the other times i want the same data i turn to variable that will hold the information so I do not turn any more to the server .

To achieve this i use data() method .link for more info
http://www.w3schools.com/JQuery/misc_data.asp

in the next example it asume i have json file in the server that in the code .

json file


{
    "articles":[
        {
            "id"        : 1,
            "name"      : "House",
            "bigpic"    : "https://c9.io/a1_shay/blabla/workspace/home-big.png",
            "smallpic"  : "https://c9.io/a1_shay/blabla/workspace/home-small.png"  
        },
        {
            "id"        : 2,
            "name"      : "Tree",
            "bigpic"    : "https://c9.io/a1_shay/blabla/workspace/tree-big.png",
            "smallpic"  : "https://c9.io/a1_shay/blabla/workspace/tree-small.png"
        }
    ]
}

the file i use


<!DOCTYPE html>
<html>
<head>
    <title>First jQuery Mobile Example</title>
    <!-- the three things that jQuery Mobile needs to work -->
    <link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" />
    <script src="jquery-1.11.0.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width"/>

    <!--this script is for getting data from json file save it to .data() in jquery .and display list of all persons in the list -->
    <script>
        var output = '';

        $.ajax({
            url: 'https://c9.io/a1_shay/blabla/workspace/myFirstJson.json',
            dataType: 'json',
            type: 'get',
            cache: false,
            success: function(data)
            {
                <!--this line is to save the data that come from the json,because i don"t want to make another call to the json file-->
                <!--in the next script i call to this data.-->
                <!--the "div" is an element i choose it doesn't matter what i choose,i just must to have in my page some tag of "div"-->
                <!--it doesn't effect him at all-->
                $("div").data("myDataFromJson", data.articles);
                <!--here i create the li for every item that i get from json  -->
                $(data.articles).each(function(index, value)
                        {
                            output  = '<li>'  
                                    '<a href="'   '#secondpage'   '" onclick=getDataById("'  value.name  '")>'  
                                    value.name   '</a>'   '</li>';
                        }
                )
                console.log(output);//the output represent all the li i build in the loop
                var update = document.getElementById('listOfItemes');//getting the element that i want to insert to him the data
                update.innerHTML = output;//insert the data to the element
                $('#listOfItemes').listview('refresh');//must refresh element that hold li
            }
        })
    </script>

    <!--this script is for every time i select person -->
    <script>
        function getDataById(id)
        {
            var showOnTheScreeen;

            <!--here i iterate the list again and search the person the first page select , ones i found this person-->
             <!--i display all information on that person-->
            $($("div").data("myDataFromJson")).each(function(index, value)
                    {
                        alert(id);

                    }
            )
        }
    </script>
</head>
<body>


<!-- This is the first page -->
<section id="firstpage" data-role="page">
    <div data-role="header">
        <h1>Page Content Header</h1>
    </div>
    <!--here i display a list of all persons . that info will come from script -->
    <ol data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" id="listOfItemes">
    </ol>

    <div class="ui-content" role="main">
        <p>This is the content on page 1</p>
        <p><a href="#secondpage">Go to second page</a></p>
    </div>
    <div data-role="footer">
        <h2>Page Content Footer</h2>
    </div>
</section>

<!-- This is the second page -->
<div id="secondpage" data-role="page">
    <div data-role="header">
        <h1>Page Content Header</h1>
    </div>

    <!--here all the info of one person will display. that info will come from script -->
    <div id="detailsOnPerson">
    </div>


    <div class="ui-content" role="main">
        <p>Page 2 has different content on it</p>
        <p><a href="#firstpage">Go to first page</a></p>
    </div>
    <div data-role="footer">
        <h2>Page Content Footer</h2>
    </div>
</div>

</body>
</html>

Advertisements
This entry was posted in כללי and tagged , , . Bookmark the permalink.

2 Responses to How to save data that come from json using ajax

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s