Json results add to html container

Question

i have a Json result that i got through a webservice, now i want to see if it works, how do i make that Json values show in a button or link? and on page load?

one of the values returned looks like this : "name": "Muhammad Ali", "nickname": "The Greatest",

very new to json and javcascript.

Javascript and json :

    function Getdata() {
    $.ajax({
        type: "POST",
        data: "{}",
        url: "https://raw.github.com/appcelerator/Documentation-Examples/master/HTTPClient/data/json.txt",
        contentType: "application/json; cherset=utf-8",
        datatype: "json",
        success: loadpage,
        failure: givealert
    });



    function loadpage(result) {
        if (resu.hasOwnProperty("d")) { result = res.d; }
        var data = JQuery.parseJSON(result);
    }

    function givealert(error) {
        alert('failed!!' + error);
    }
}

now how do i get it to show one value from the web-service in a label and on form load? html markup for the label/button :

 <div id="listheight">
                <a type="button" id="routing" href="#datatapage"></a>
            </div>

i am using cordova/phonegap,Visual studi2010, html, javascript, css, jquerymobile and jquery1.8.2.

thanks in advance!

are u getting anything in ur var data ....i mean var data = JQuery.parseJSON(result); .. if yes.. post wat u r json (returned value) (data in ur case)... — bipen
– bipen, Commented Nov 1, 2012 at 7:51
is there a way i can check that? cause windows phone sdk, dont support debugging for javascript? thanks for ya quick reply :)\ — Arrie
– Arrie, Commented Nov 1, 2012 at 7:54

Lukas_Skywalker · Accepted Answer · 2012-11-02 12:45:04Z

1

First, use this HTML

<a type="button" id="routing" href="#datatapage" onclick="Getdata()">Click</a>

Use this code to call the method automatically on pageload

$(document).ready(function() {
  // this is executed on page load
  Getdata();
});

and change your code to

jQuery.support.cors = true;

function Getdata() {
  var request = $.ajax({
    type: "POST",
    data: "{}",
    dataType: 'json',
    url: "data/json.txt",  // better use a relative url here
    mimeType: "application/json; cherset=utf-8",
    success: loadpage,
    failure: givealert
  });

  function loadpage(result) {
    // this only displays you the values in a messagebox for you to check if it works
    // you can remove the following two lines
    alert("Name = "+result.fighters[0].name);
    alert("Nickname = "+result.fighters[0].nickname);
    // this changes the text
    document.getElementById("routing").innerHTML = result.fighters[0].name;
  }

  function givealert(error) {
    alert('failed!!' + error);
  }
}

I created a JSFiddle for this: http://jsfiddle.net/FUWyJ/ Note that the URL i send the request to is provided by JSFiddle and points to https://gist.github.com/4001105 where I made a copy of your sample data.

edited Nov 2, 2012 at 12:45

answered Nov 1, 2012 at 7:53

Lukas_Skywalker

2,0701 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Arrie Over a year ago

hey Lukas, thanks for quick reply i did what you said and still no response from application. and i even went on onclick? doesnt even hit the alert i put in after function getdata()?

Arrie Over a year ago

edit on my comment - it actually do hit the function, just not getting any data loaded into that button

Lukas_Skywalker Over a year ago

Are you aware that your js file and the file you are POSTing to must be on the same domain? Otherwise, AJAX is not allowed to make a request to it. Do you access a file on the same site?

Lukas_Skywalker Over a year ago

Ah, I see that you're using local files. Use the line jQuery.support.cors = true; in your js-file to allow remote requests from jQuery.

Arrie Over a year ago

hey lukas, my url is down at the moment im gonna edit the url that i got from GitHub, and then i want the button to display only the 1st name on the page! and the nickname on another label! edited the question

|

Collectives™ on Stack Overflow

Json results add to html container

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related