Parsing JSON through jQuery to list

Question

I have a php file, which I run through javascript. The php goes like this:

<?php
  $con=mysqli_connect("localhost","root","****","*****");
  if (mysqli_connect_errno())
    {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

  $result = mysqli_query($con,"SELECT * FROM pictures");
  foreach ($result as $row){
    $return[]=array('number'=>$row['number'], 'path'=>$row['path']);
  }
  $dbh = null;

  header('Content-type: application/json');
  echo json_encode($return);
?>

When I run the php file in a browser directly, I get this response:

[{"number":"1","path":"blue.png"},{"number":"2","path":"red.png"},{"number":"3","path":"green.png"}...]

Then I have the javascript that goes like this:

var refreshImages = function() {
  $.get( // JQuery function to execute an AJAX Get request
    url: "get.php",
    dataType: "json
    success: function(data) { 
      data.forEach(function(src, i) {
        var img_tag = $("#img_+i).find("img"); // Finds the correct img tag to update
        if(img_tag.attr('src') != src) {
          img_tag.attr('src', src);
        }
      }
    }
}
window.setInterval(refreshImages, 1000); // Calls refreshImages every 1000ms

And with values I get from the php file I need to fill in this ul:

<ul>
  <li id="img_1" class="image">first value should go here<span>10.000</span></li>
  <li id="img_2" class="image">second value should go here<span>7.500</span></li>
  <li id="img_3" class="image">third value should go here<span>5.000</span></li>
  ...
  <li id="img_35" class="image">35th value should go here<span>5.000</span></li>

Can anyone show me where I'm wrong? I'm pretty sure it's the javascript but I have no idea...

adeneo · Accepted Answer · 2014-01-20 20:38:36Z

3

You're missing quotes and curlybraces everywhere, and the $.get method does not accept options like that, that would be $.ajax :

var refreshImages = function() {
    $.ajax({
       url      : "get.php",
       dataType : "json"
    }).done(function(data) { 
        $.each(data, function(i, src) {
            var img_tag = $("#img_" + i).find("img");

            if( img_tag.attr('src') != src) {
               img_tag.prop('src', src);
            }
        });
    });
}

window.setInterval(refreshImages, 1000);

Also note that you're setting the source, while your example shows the elements as being LI elements, and the value inserted as plain text in the LI, not images? It's not really clear what you expect to happen, are you trying to change images or LI elements, or creating images or what ?

edited Jan 20, 2014 at 20:38

answered Jan 20, 2014 at 20:23

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Beetlegeuse Over a year ago

I am trying to use "number" to identify li by id and use "path" to add text to li. And now console writes: Uncaught SyntaxError: Unexpected token {

adeneo Over a year ago

@user2813059 - I was missing a c in function, fixed that.

Beetlegeuse Over a year ago

Everythin is ok now but javascript writes <img src="[object Object]">, any idea why?

adeneo Over a year ago

Probably because src is an object. Console log it and see what it is

Beetlegeuse Over a year ago

If I understand logging corectly this is what I get: Object {number: "1", path: "blue.png"} "Logged!" and for each value I get this

|

Collectives™ on Stack Overflow

Parsing JSON through jQuery to list

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related