CODEWITHSUNDEEP
jqueryjson
Vithushan
Vithushan

Reputation: 513

getting data from json file

I have a json file named "json.json" in the directory. I want to get items from that file and display them in the UL which i had hard-coded now. When i try to get that file it is not working. Can anyone help me retire it and add those items in the json file to the UL. Thanks in advance

<!doctype html>
<html lang="en">
    <head>
        <title>Example</title>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
        <script type = "text/javascript" src = "js/jquery.js"></script>
        <script type = "text/javascript" src = "js/jquery_ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">       
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </head>

    <body>
        <table id="myTable" class= "table table-bordered">
            <tr>
                <th class="col-md-6 text-center success">
                    List 1
                </th>
                <th class="col-md-6 text-center danger">
                    List 2
                </th>
            </tr>
            <tr>    
                <td class="col-md-6">
                    <ul id="firstlist">
                        <li>Apple <img  id="Apple" src = "next.jpg" class = "list1"></li>
                        <li>Orange <img id="Orange" src = "next.jpg" class = "list1"></li>
                        <li>Avacado <img id="Avacado"src = "next.jpg" class = "list1"></li>
                        <li>Banana <img id="Banana" src = "next.jpg" class = "list1"></li>
                        <li>Mango <img  id="Mango" src = "next.jpg" class = "list1"></li>
                    <ul>    
                </td>
                <td class="col-md-6">
                    <ul class = "seclist" id = "seclist"></ul>
                </td>
            </tr>
        </table>

        <script>        
            $(function(){
                $.getJSON('json.json',function(data){
                    console.log('success');
                }).error(function(){
                    console.log('error');
                });
            });
        </script>
    </body>
</html>

I created the json file like this:

{"Fruits":[
    {"textToBeDisplayed":"Apple"},
    {"textToBeDisplayed":"Orange"},
    {"textToBeDisplayed":"Avacado"},
    {"textToBeDisplayed":"Banana"},
    {"textToBeDisplayed":"Mango"},
]}

Upvotes: 0

Views: 159

Answers (4)

Brunis
Brunis

Reputation: 1063

You need to assign the json array to a variable. LittleDragon's suggestion is correct, but you need to use it like this:

var fruits = {"Fruits":[
    {"textToBeDisplayed":"Apple"},
    {"textToBeDisplayed":"Orange"},
    {"textToBeDisplayed":"Avacado"},
    {"textToBeDisplayed":"Banana"},
    {"textToBeDisplayed":"Mango"},
]};

and then just add <script src="json.json"></script> on your page, then you can access the fruits json array from javascript.

Here's a fiddle for you: http://jsfiddle.net/ar37G/

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

The filename should be in quotes as its a string:

$.getJSON('json.json', function(data){
    console.log('success');
}).error(function(){
    console.log('error');
});

Also note that you cannot make an AJAX request to the local file system - it will be blocked by the browsers' security. You need to make the request to a webserver, either a local (WAMP/LAMP/IIS etc) or remote.

Upvotes: 2

LittleDragon
LittleDragon

Reputation: 2437

in the page header you should define this 

<script src="json.json"></script>

Upvotes: 3

LittleDragon
LittleDragon

Reputation: 2437

here is the way 

$.getJSON('json.json', function(data){

var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

$( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );   


});

Upvotes: 1

Related Questions