All geek questions in one place

Using json with jquery Ajax doesn't return anything

I wanted to learn how to use JSON with jQuery, so I followed it with a simple tutorial video tutorial. However, after completing all the steps and using the same code as in the video, I still don’t see anything in the console after console.log. What am I doing wrong?

Here is the HTML page:

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $.ajax({ url: 'articles.json', dataType: 'json', type: 'get', cache: false, succes: function(data) { $(data.articles).each(function(index, value) { console.log("success"); }); } }); </script> </body> </html>

And here is my JSON file (articles.json) from which I am trying to use data:

 { "articles": [ { "id": 1, "name": "Article 1" }, { "id": 2, "name": "Article 2" }, { "id": 3, "name": "Article 3" } ] }

Thanks in advance!

+6
source share
2 answers

Here is the correct way to read json data in javascript using jquery

 <script> $.ajax({ url: 'articles.json', dataType: 'json', type: 'get', cache: false, succes: function(data) { var jsonData = JSON.parse(data); $.each(jsonData.articles, function(i, v) { console.log("id = "+ v.id); console.log("name = " + v.name); }); } }); </script>
0
source

Use $ .getJSON

Example

 $.getJSON( "articles.json", function( data ) { $.each( data.articles, function( key, val ) { console.log(val); }); });

http://api.jquery.com/jquery.getjson/

-2
source

Source: https://habr.com/ru/post/1013503/

More articles:


All Articles