How to show some json objects

Question

I'm trying to get JSON file with ajax and display it in an HTML div but only part of it, not everything.

Here is the ajax

 $(function () { $.ajax({ 'url': 'http://apis.is/weather/observations/en?stations=3696&time=1h&anytime=0', 'type': 'GET', 'dataType': 'json', 'success': function(response) { } }); });

and I'm trying to put just some object for example just the temperature in the HTML div

 <!DOCTYPE html> <html lang="is" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="js/main.js"></script> </head> <body> <div id="result"> <p>i want the result here</p> </div> </body> </html>

anybody that knows this stuff?

Welcome to Stack Overflow. You have not provided an example of the JSON Data that would be sent back to the AJAX call. What specific details do you want shown? Please provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example — Twisty
– Twisty, Commented Mar 28, 2021 at 20:39
Hi Magnús, Code-only questions are discouraged on StackOverflow. If you haven't already, you should take the tour and get familiar with how to ask a good question. Thanks! — 3x071c
– 3x071c, Commented Mar 28, 2021 at 20:57

Mara Black · Accepted Answer · 2021-03-28 20:42:07Z

You can start from here, I displayed the whole object but you need to parse the data according to your needs

$(function() { $.ajax({ 'url': 'http://apis.is/weather/observations/en?stations=3696&time=1h&anytime=0', 'type': 'GET', 'dataType': 'json', 'success': function(response) { displayData(response); } }); }); function displayData(data) { document.getElementById("result").innerHTML = JSON.stringify(data, null, 4); //parse the data and display only the fields that you need and display with innerHTML }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div> <p id="result">i want the result here</p> </div> </body>

Twisty · Accepted Answer · 2021-03-28 21:49:30Z

Consider the following code.

$(function() { function showHtmlData(obj) { var html = ""; $.each(obj, function(key, value) { html += key + ": " + value + "<br />"; }); return html; } function showJson(json) { $("#result p").html(showHtmlData(json)); } $.ajax({ 'url': 'https://apis.is/weather/observations/en?stations=3696&time=1h&anytime=0', 'type': 'GET', 'dataType': 'json', 'success': function(response) { showJson(response.results[0]); } }); });

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <div id="result"> <p></p> </div>

This takes the JSON Data, converts it into a String, and adds it to the <p>.

Collectives™ on Stack Overflow

How to show some json objects

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related