-1

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>
Baby_Boy
  • 346
  • 3
  • 18

2 Answers2

2

$.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;
})
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • attempted this, and it didn't return anything whatsoever.(is there possibly another issue?) – Baby_Boy Aug 24 '21 at 20:56
  • Check the browser console for errors. Use the Network tab to see what's actually being returned by the AJAX call. – Barmar Aug 24 '21 at 20:58
  • Try just putting `console.log(data);` in the function. – Barmar Aug 24 '21 at 20:59
  • I am currently on a device without devtools, (cellphone[or if there is i don't want to try and use it with a touch screen]) ill get back to you later – Baby_Boy Aug 24 '21 at 21:04
1

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

Mandi
  • 414
  • 1
  • 4
  • 12