store json data in a java script variable

Question

First thing I am new to javascript. What I am trying to do is to get data from a URL in json and save it in java script variable.

What I have already done:

    var json = '{"result":true,"count":1}',
    obj = JSON.parse(json);
    alert(obj.count);

This shows me output : 1

and what I want is to get data from URL like:

var json ='url';
obj = JSON.parse(json);
alert(obj.count);

and for the clearance I am using this URL to get JSON data and i just need to print fare from the data.

any help in this matter would be highly appreciated !!

I have done this in php like this way, but I need it to do this in javascript.

$jsonData = file_get_contents("url");
$json = json_decode($jsonData,true);
echo $json['fare'];

score 0 · Answer 1 · answered Jul 15 '16 at 10:11

0

$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback', function(data) {
   console.log(data)
});

Try this ways to read ur URL

answered Jul 15 '16 at 10:11

black_pottery_beauty

861
8
17

not working, actually I am trying to get data from URL in a javascript function which activates on button click – Devilism Jul 15 '16 at 10:13
function showHint() { var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { console.log(JSON.parse(xhttp.responseText)); } }; xhttp.open("GET", "http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback", true); xhttp.send(); } this way in javascript – black_pottery_beauty Jul 15 '16 at 10:33

score 0 · Answer 2 · answered Jul 15 '16 at 10:13

0

Try this way, convert the url to an array then

var json = 'data url in array',
obj = JSON.stringify(json);
alert(obj.count);

answered Jul 15 '16 at 10:13

Bar O Kurniawan

37
11

Mr.7 · Answer 3 · 2016-07-20T10:40:43.937

0

Temporary Solution:

Here is my working fiddle

If you get 'Access-Control-Allow-Origin' header is present on the requested resource. error, add CORS extension to your browser and enable it.

hope this helps :)

edited Jul 20 '16 at 10:40

answered Jul 15 '16 at 10:19

Mr.7

2,292
1
20
33

your fiddle is not displaying anything – Devilism Jul 15 '16 at 10:23
adding CORS extension does not solve the issue, only resolve the issue in 1 computer. – Raptor Jul 15 '16 at 10:25
yes, it is solved now, but will this works on all users? – Devilism Jul 15 '16 at 10:27
@BilalZafar using CORS extension, works on only your machine – Mr.7 Jul 15 '16 at 10:29
1

No. Unless you force all users to install the extension and use Chrome. – Raptor Jul 15 '16 at 10:29
ok, so its a bad solution to implement this, is there any other way to do this ? – Devilism Jul 15 '16 at 10:30
1

read more about cross-domain javascript request, or use server-side call instead. – Raptor Jul 15 '16 at 10:49

score 0 · Answer 4 · answered Jul 15 '16 at 10:20

0

Use Ajax call for fetching data from external sources.

On clicking it will fetch data from the url.

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("http://daewoocab-test.herokuapp.com/api/v1/rates?token=6ab676ddd7bf00101408ea3a27fdbb8ad22e9dcdf2faafdcd2ef0efc1509d463&pickup_area=Street%201%2CF-8%2CIslamabad%2CIslamabad%20Capital%20Territory%2CPakistan&drop_area=padhrarazadari.com%2C%20kallar%20kahar%20road%2C%20padhrar%2C%20punjab%2C%20pakistan&distance=169", function(result){
            console.log(result);
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

answered Jul 15 '16 at 10:20

Umesh Maharshi

1,571
10
12

install allow control allow origin extention. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi – Umesh Maharshi Jul 15 '16 at 10:26
ok good, how can all the users will able to do this? I mean this things will work on only my pc right? – Devilism Jul 15 '16 at 10:29
That is useful when making request between different domains. For we are making request from stackoverflow to your domain. Users will be making within the same domain. So they won't have any problem. – Umesh Maharshi Jul 15 '16 at 10:32
http://moubeenfarooqkhan.com/fyp/abc.php I have added the code on this page and same issue, it means that every user will have to install that extension ? – Devilism Jul 15 '16 at 10:40
can you tell me the other solution if you have ? – Devilism Jul 15 '16 at 10:51
try this : http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource – Umesh Maharshi Jul 15 '16 at 12:19

score 0 · Answer 5 · answered Jul 15 '16 at 10:45

<!DOCTYPE html>
<html>
<body>

<button onclick="showHint()">abcd</button>
<script>
function showHint() { 

var xhttp; 
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { 
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert(JSON.parse(xhttp.response));
}

}; 
xhttp.open("GET", "http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback", true);
xhttp.send();

} 
</script>

</body>
</html>

This one does not depend on any jquery Use it – black_pottery_beauty Jul 15 '16 at 10:46 — black_pottery_beauty, Jul 15 '16 at 10:46

store json data in a java script variable

5 Answers5