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?

https://stackoverflow.com/questions/17635866/get-values-from-an-object-in-javascript — ikiK, Mar 28 '21 at 20:34
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: https://stackoverflow.com/help/minimal-reproducible-example — Twisty, Mar 28 '21 at 20:39
Hi Magnús, Code-only questions are discouraged on StackOverflow. If you haven't already, you should [take the tour](https://stackoverflow.com/tour) and get familiar with [how to ask a good question](https://stackoverflow.com/help/how-to-ask). Thanks! — 3x071c, Mar 28 '21 at 20:57

score 0 · Answer 1 · answered Mar 28 '21 at 20:42

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 · Answer 2 · 2021-03-28T21:49:30.320

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>.

How to show some json objects

2 Answers2