CODEWITHSUNDEEP
jqueryjson
user3415508
user3415508

Reputation: 33

Another JSON JQuery request

So I am trying to build a page that will read all links images and descriptions from a configuration file. I am new to JQuery so I am trying to figure it out as I go. I am using a query string to define the id and then want to look this up in the JSON file and update all the details in the config file.

This is not working but I have no idea why. I have no idea if this is reading in the JSON file and no idea how to debug the script.

ok so here is my Code

<html>
<head>
    <title>Maps</title>

    <link href="MapStyles.css" rel="stylesheet" type="text/css"></link>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/purl.js"></script>


    <script type="text/javascript">
        //Update stuff from query string
        $(document).ready(function() {
            var mapno = $.url().param("MapNo");
            mapno = 1;
            $.getJSON("maps.json", null, function(data) {

                $("#mapnum").text(data[mapno].MapDesc);
                $("#mappic").attr("src", data[mapno].MapImage);
                $("#maploc").text(data[mapno].MapArea);
            })

        })
    </script>
</head>

<body class="Allbody">

    <div class="MapHeading">
        <div class="MapNumber" id="mapnum"></div>
        <div class="MapArea" id="maploc"></div>
    </div>


    <div class="MapImg">
        <img id="mappic" alt="" src="" />
    </div>

    <div class="MapHeading">
        <div class="MapNavLeftArrow">
            <a id="prevlink" href="">
                <img alt="" class="NavImg" src="assets/Left_Arrow.png" />
            </a>
        </div>
        <div class="MapNavRightArrow">
            <a id="nextlink" href="">
                <img alt="" class="NavImg" src="assets/Right_Arrow.png" />
            </a>
        </div>
        <div class="MapTOC">
            <a id="dirlink" href="">
                <img alt="" class="NavImg" src="assets/TOC.png" />
            </a>
        </div>

    </div>

</body>

</html>

Here is an example of my JSON file

 "Maps": {
    "Map": [
      {
        "-id": "1",
        "MapDesc": "Map 1",
        "MapArea": "Richmond",
        "MapImage": "assets/Map1.jpg",
        "GoogleRef": "https://www.google.com/maps/@-37.8112588,144.9935245,18z",
        "DNCLink": "/DNC.html?MapNo=1",
        "NavLeft": "Map.html?MapNo=1",
        "NavRight": "Map.html?MapNo=2",
        "NavTOC": "Directory.html"
      },
      {
        "-id": "2",
        "MapArea": "Richmond",
        "MapImage": "assets/Map2.jpg",
        "GoogleRef": "https://www.google.com.au/maps/@-37.8110093,144.9981776,18z",
        "DNCLink": "/DNC.html?MapNo=2",
        "NavLeft": "Map.html?MapNo=1",
        "NavRight": "Map.html?MapNo=3",
        "NavTOC": "Directory.html"
      },

Upvotes: 1

Views: 34

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Try with this

 $("#mapnum").text(data["Maps"].Map[0].MapDesc);
 $("#mappic").attr("src", data["Maps"].Map[0].MapImage);
 $("#maploc").text(data["Maps"].Map[0].MapArea);

I think your Json is invalid. There missing an opening and closing {.

A valid Json should look like,

{
"Maps": {
    "Map": [

        {
            "-id": "1",
            "MapDesc": "Map 1",
            "MapArea": "Richmond",
            "MapImage": "assets/Map1.jpg",
            "GoogleRef": "https://www.google.com/maps/@-37.8112588,144.9935245,18z",
            "DNCLink": "/DNC.html?MapNo=1",
            "NavLeft": "Map.html?MapNo=1",
            "NavRight": "Map.html?MapNo=2",
            "NavTOC": "Directory.html"
        }, {
            "-id": "2",
            "MapArea": "Richmond",
            "MapImage": "assets/Map2.jpg",
            "GoogleRef": "https://www.google.com.au/maps/@-37.8110093,144.9981776,18z",
            "DNCLink": "/DNC.html?MapNo=2",
            "NavLeft": "Map.html?MapNo=1",
            "NavRight": "Map.html?MapNo=3",
            "NavTOC": "Directory.html"
        }

    ]
}

}

Upvotes: 1

Related Questions