3

Beginner here... I have been trying different methods from answers on this topic but none of them seems to work. I see this question has been asked a lot but somehow i still cant find my answer. I want to use a local json file, that is in the same folder as my JavaScript and HTML file so i can make table from the objects in it and be able to add or remove objects from it. As you already know the commented solution doesn't work. Any help?

HTML File:

<!DOCTYPE html>
<html>
    <head>

        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />

    </head>
    <body>

            <button id="json">json</button>

        <!-- <script type="text/javascript" src="books.json"></script> -->
        <script src="jquery-3.2.1.js"></script>
        <script src="script.js"></script>

    </body>
</html>

JavaScript File:

$(document).ready(function(){
    // var myBooks = JSON.parse(books);


        $(document).on('click', '#json', function (event) {

                // alert(myBooks[0].author);
                // alert(myBooks[0].title);
                // alert(myBooks[1].author);
                // alert(myBooks[1].title);
        });

});

My books.json file

[
    {
        "author": "Margaret Atwood",
        "title": "THE HANDMAID'S TALE"
    },
    {
        "author": "Ursula K. Le Guin",
        "title": "THE DISPOSSESSED"
    },
    {
        "author": "Mary Shelley",
        "title": "FRANKENSTEIN"
    },
    {
        "author": "Ursula K. Le Guin",
        "title": "THE LEFT HAND OF DARKNESS"
    },
    {
        "author": "Connie Willis",
        "title": "DOOMSDAY BOOK"
    },
    {
        "author": "Frank Herbert",
        "title": "DUNE"
    },
    {
        "author": "Maureen F. McHugh",
        "title": "CHINA MOUNTAIN ZHANG"
    },
    {
        "author": "Joe Haldeman",
        "title": "THE FOREVER WAR"
    },
    {
        "author": "Kate Wilhelm",
        "title": "WHERE LATE THE SWEET BIRDS SANG"
    },
    {
        "author": "Orson Scott Card",
        "title": "ENDER'S GAME"
    },
    {
        "author": "Daniel Keyes",
        "title": "FLOWERS FOR ALGERNON"
    }
]
Touheed Khan
  • 2,149
  • 16
  • 26
Happy Coconut
  • 973
  • 4
  • 14
  • 33
  • You're going to have to make an ajax request to the ```.json``` file something like: ```$.get("/books.json").then(function(myBooks) { alert(myBooks[0].author); });``` – Varinder Feb 16 '18 at 03:27
  • Duplicate of : https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript – DadyByte Feb 16 '18 at 03:33

1 Answers1

-1

Try this:

$.getJSON("books.json", function(json) {
    console.log(json);
    //access your JSON file through the variable "json"
});
Capn Jack
  • 1,201
  • 11
  • 28
  • 1
    Error in console: Failed to load file//....//books.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. – Happy Coconut Feb 16 '18 at 04:19