skip to Main Content

So basically I’m having the standerd issue of the ajax call not retrieving the JSON data. It would be that it was an array, and your not using the index. But I AM using an index on the front-end. All the questions I’ve seen for this haven’t worked, (most of them being "use a index") and I’ve looked at the documentation. I’ve tried aiming directly at the database but I’m currently using a php file. I’ve tried the standard way of using $.getJSON (which retuns nothing) so I tryed defining it as a variable and that returns [object Object] or undefined (I still have both in my code). Now, for some code
database.json

[{"Usrname":"Admin","Comment":"Comments Are Working!"},{"Usrname":"billy","Comment":"y u no work"},{"Usrname":"jrnvreifnwrg","Comment":"vfrjinoiewg"},{"Usrname":"bill","Comment":"testing 123 testing"},{"Usrname":"James","Comment":"Now all that has to be done it to show the text in a chat box"},{"Usrname":"test","Comment":"hi there pls work"},{"Usrname":"Benjamin","Comment":"Hello"},{"Usrname":"Benjamin","Comment":"Hello"},{"Usrname":"Bill","Comment":"Hello"}]
  • I’ve tried with and without the quotes around the whole thing, didn’t seem to change anything

get.php

<?php
header('Content-Type: application/json');
$data = file_get_contents('database.json');
echo $data;
?>

contact.html
(just a snippet, the comment div is there and functioning)

<script>

      $(document).ready(function () {
        response = $.getJSON('https://ambitioussociableprotools.babyboy666.repl.co/get.php')  
        document.getElementById("comments").innerText += response
        document.getElementById("comments").innerText += response[0]
       
      });
    </script>
    <script>
      $.getJSON("https://ambitioussociableprotools.babyboy666.repl.co/get.php", function(data){
        document.getElementById("comments").innerText += data[0].Usrname
      });
    </script>
    <script>
      data = $.get("https://ambitioussociableprotools.babyboy666.repl.co/get.php")
      document.getElementById("comments").innerText += data
      document.getElementById("comments").innerText += data[0].Usrname
      var obj = JSON.parse(data)
      document.getElementById("comments").innerText += obj
      document.getElementById("comments").innerText += obj[0]
      document.getElementById("comments").innerText += obj[0].Usrname
    </script>

2

Answers


  1. $.getJSON() doesn’t return the object. It’s an asynchronous function, so you use a callback function, which receives the object as the parameter.

    $.get("https://ambitioussociableprotools.babyboy666.repl.co/get.php", function(data) {
      document.getElementById("comments").innerText += data[0].Usrname;
    })
    
    Login or Signup to reply.
  2. Your problem is CORS, take a look at: Understanding CORS

    Change your PHP endpoint to:

    <?php
    header('Access-Control-Allow-Origin: *');
    header('Content-Type: application/json');
    $data = file_get_contents('database.json');
    echo $data;
    ?>
    

    If you want to control access from a specific origin, you can change * to your request origin. More info here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search