Javascript, JSON, PhoneGap

I'm 100% new to JSON and have very limited experience in JavaScript. I'm trying to move a little more into these languages.

Anyway, I'm building a super simple app using PhoneGap and Wordpress. Basically, I use the JSON API plugin to get an api from my Wordpress page and then I'm attempting to convert a certain part of the returned array and print it out to a div, and that's where I'm stuck. My API is quickcutsystem.com/

You can see what I'm attempting in my non-functional and messy code. Basically, I just don't know what I'm doing, could you help out a newbie?

index.html for my phonGap app

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>READ JSON Example (getJSON)</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {

        var data = JSON.parse($.getJSON("http://quickcutsystem.com/login/?json=1"););

        var id = data.Status[0].Id;
        var name = data.Status[0].Username;
        document.getElementById("output").innerHTML = name;
      });
   </script>
  </head>
  <body>
    <div id="output"></div>
  </body>
</html>

Answers 1

  • Your JSON structure is like this

    "status": "ok",
    "page": {
      "id": 228,
      "type": "page",
    

    So if you want to get pageId and pageType, you can do like this:

    var id = data.page.id;
    var name = data.page.type;
    

    Btw, in your JSON I don't see Username field.

    Suggestion, you can go here: http://jsonformatter.org/, click on Load data and input the url, then click Format / Beautify. You can see the structure clearly.


Related Articles