How to print json console.log data in browser?

Question

I'm trying to output Json data in browser using javascript but i was only able to output in console.log i don't know what to search of. I'm a beginner in javascript please help me out here.

script.js

$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
        mode = 'movie/',
        movie_id,
        key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1';

    $('button').click(function() {
        var input = $('#movie').val(),
            movie_id = encodeURI(input);
        $.ajax({
            type: 'GET',
            url: url + mode + movie_id + key,
            async: false,
            jsonpCallback: 'testing',
            contentType: 'application/json',
            dataType: 'jsonp',
            success: function(json) {
                console.dir(json);
            },
            error: function(e) {
                console.log(e.message);
            }
        });
    });
});

index.php

<input id="movie" type="text" /><button>Search</button>

This code output all the data in console.log but i wanna do is it should display data in browser and i wanna output some specific objects like title of movie and overview and image.

Possible duplicate of [Display JSON Data in HTML Table](https://stackoverflow.com/questions/19901843/display-json-data-in-html-table) — Ahmad Maleki, Nov 18 '17 at 05:01
@HassanImam https://jsfiddle.net/b46xhn3f/8/ search and check console. — James Walker, Nov 18 '17 at 05:02
Start here [access-process-nested-objects-arrays-or-json](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — charlietfl, Nov 18 '17 at 05:10
@JamesWalker I'm just curious but wouldn't you rather search by movie title? — NewToJS, Nov 18 '17 at 06:19

score 0 · Accepted Answer · answered Nov 18 '17 at 05:14

Retrieve the specific values using key and show it. The object have keys and values. Doing object.key will give the value

$(document).ready(function() {
  var url = 'https://api.themoviedb.org/3/',
    mode = 'movie/',
    movie_id,
    key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1';

  $('button').click(function() {
    var input = $('#movie').val(),
      movie_id = encodeURI(input);
    $.ajax({
      type: 'GET',
      url: url + mode + movie_id + key,
      async: false,
      jsonpCallback: 'testing',
      contentType: 'application/json',
      dataType: 'jsonp',
      success: function(json) {
        $("#title").text(json.title);
        //$("#movTitle").prop('src'); // add image path here
        $("#overview").text(json.overview) //overview is a key
      },
      error: function(e) {
        console.log(e.message);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="movie" type="text" /><button>Search</button>
<!-- Search This: 346364 -->
<div id="title">
</div>
<div>
  <img id="movTitle" src="" alt="">
</div>
<div id="overview">

</div>

score 0 · Answer 2 · answered Nov 18 '17 at 05:16

To output your JSON data to the browser, you need to modify the HTML of the page.

First, add a few elements to your index.php like so:

index.php

<input id="movie" type="text" /><button>Search</button>

<h1>Movie info:</h1>
<p>Movie title: <span id="movie-title"></span> </p>
<p>Movie budget: <span id="movie-budget"></span> </p>

Then, in your success callback that you are defining in the jQuery ajax request, you can grab the span elements and replace their text by using jQuery's text function like so:

$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'movie/',
    movie_id,
    key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1';

    $('button').click(function() {
        var input = $('#movie').val(),
        movie_id = encodeURI(input);
        $.ajax({
            type: 'GET',
            url: url + mode + movie_id + key,
            async: false,
            jsonpCallback: 'testing',
            contentType: 'application/json',
            dataType: 'jsonp',

            success: function(json) {

                // grab the span elements by ID and replace their text with the json text

                $("#movie-title").text(json.title);
                $("#movie-budget").text(json.budget);

                console.dir(json);
            },

            error: function(e) {
                console.log(e.message);
            }
        });
    });
});

If i'm using $_POST method with php and have fields like, Name, Overview, Budget, Cast and Link | when i click on search some of the fields should fill auto due to ajax but when i input link that will be manually and after click submit i should request post method. — James Walker, Nov 18 '17 at 14:45

How to print json console.log data in browser?

2 Answers2