CODEWITHSUNDEEP
javascriptphpjqueryhtmlarrays
Ha KiM's
Ha KiM's

Reputation: 121

How to populate <div> elements with array elements from php function using javascript?

I have a php function that return to me an array of some RSS data, I would like to combine PHP with javascript. So, I did the following steps:

1- return the array from the PHP function;

2- Use foreach to loop over each element within the array returned;

3- use javascript to create <div> elements and populate each one with data brought from the array and add a dynamic effect.

Here is my code: 

      <script>
                <?php 
                header("Content-Type: text/javascript; charset=utf-8");
                foreach(getFeed() as $article){ 
                ?>
                    setInterval(function() {

                    createDiv();
                    },5000);


                    function createDiv() {
                    document.getElementById("test").appendChild(document.createElement("DIV"));

                        $("#test").append('<div ><h4 id="title"><?php echo $article["title"]; ?></h4><p id="content"><?php echo $article["description"];  ?></p>');
                    }

                <?php 
                }
                ?>
      </script>

      <div  id= "test">

      </div>

The problem is I get n duplicated elements (n is the length of the array):

Element 1

Element 1

Element 1

...

However, this is not what I want, the desired result I want to return all the elements in the array:

Element 1

Element 2

Element 3

...

So, How can I solve this problem ?

Upvotes: 1

Views: 1676

Answers (3)

Lwazi Prusent
Lwazi Prusent

Reputation: 192

First of combing scripting languages is often a headache

I recommend you rather have a php serer side call that returns your object alone (preferably in json) then call that service in you javascript, that way you have a nice separation of concerns.

Also looking at the code I see you are recreating your createDiv method every time you loop so you end up with multiple instances of that function, so when your setiInterval fires off it just keeps on picking up the first createDiv method you created and thus keeps firing it off leaving you with multiple instances of that first div.

edit for javascript code

for (var article in feed) {\n
  $("#test").append('<div class="post-id-' + article.id + '"><h4 id="title">' + article.title + '</h4><p id="content">' + article.description + '</p>');
}

Upvotes: 1

user7589098
user7589098

Reputation:

Check that.

<script>
        <?php 
            foreach(getFeed() as $article){ 
        ?>
            setInterval(function() {

                $("#test").append('<div class="post-id-<?php echo $article["id"] ?>"><h4 id="title"><?php echo $article["title"]; ?></h4><p id="content"><?php echo $article["description"]; ?></p>');

            }, 5000);

        <?php 
            }
        ?>
</script>
<div  id= "test">

</div>

Upvotes: 0

mtizziani
mtizziani

Reputation: 1016

first. stop mixing diffrent languages please :) thats ugly and bad style. seperate them. if it`s one file use hidden html tags to hide them.

<?php
  echo '<input id="hiddenField" type="hidden" value="'.json.encode(getFeed()).'">';

?>

<script type="text/javascript">
   var myArrayAsString = $('#hiddenField').val();
   var myArray = JSON.parse(myArrayAsString);
   // [{artNo: 1}, {artNo: 2}, ...]
   // now you can do what ever you want with a result array in javascript
</script>

Upvotes: 2

Related Questions