Using json_encode with PHP to add a class in another div with jQuery

Question

I'm using WordPress to get_categories into a variable and then trying to get the category name from the get_categories array to then pass that into a jQuery variable to have it check against another conditional in jQuery.

So far, I'm able to get the data from get_categories correctly and then use json_encode to parse that array into a json format.

But what I'm getting hung up on is I just want the name that is coming from the get_categories array from WordPress and then pass that into jQuery to run the conditional.

I'm not sure of the proper way to get that formatted correctly so that jQuery can interpret that without getting all cranky about it.

Here's what I have so far:

Code:

  <?php $test = get_categories('taxonomy=stuff&type=item'); ?>
            <script type="text/javascript">
            jQuery(document).ready(function($) {
              var $things = <?php echo json_encode($test); ?>
              $(".this-div").each(function() {
                var $item = $(this).attr("title");
                if ($things.indexOf($item) > -1) {
                  $(this).addClass('current');
                }
              });
            });
            </script>

I've tried $test[0]->name but that's only going to return one of the values and not all of them. So, I'm not sure if I'm going about this correctly or if there is a better way possibly.

Not sure if php has a built in map function, but conceptually you'd loop through the $test element and build another array from all the names, and that's what you would echo to the $things — Taplar
– Taplar, Commented Oct 19, 2018 at 21:31
Yeah, I was trying out a foreach loop as well, but that was yielding some zany results. Plus all efforts was leading me down the json_encode path, which appears that it should work, but I feel that I'm missing something... — ultraloveninja
– ultraloveninja, Commented Oct 19, 2018 at 21:33
You will need json_encode at the end for the resulting array to turn it into the structure that javascript will be able to parse into an array to store in $things, but you have to create the array of names you give it first. — Taplar
– Taplar, Commented Oct 19, 2018 at 21:35
Otherwise you might could potentially leave it like this, and then your if() conditional would change to something possibly like if ($things.find(function(element){ return element.name === $item; })) Ref. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Taplar
– Taplar, Commented Oct 19, 2018 at 21:39
That was the other thing I wasn't sure about which was where would I put the foreach loop in the order of operations to store those names into a variable to be pulled out with jQuery. — ultraloveninja
– ultraloveninja, Commented Oct 19, 2018 at 21:41

poorly-written-code · Accepted Answer · 2018-10-19 23:55:19Z

0

Can't say I use word press, but if get_categories() just returns a JSON string you could do something like this:

<p class="categories"><?php echo get_categories('taxonomy=stuff&type=item')></p>
<script>
    let categories = JSON.parse($('.categories').text());
    $(".this-div").each(function() {
      let $div = $(this);
      if (categories.includes($div.attr("title")) {
        $div.addClass('current');
      }
  });
</script>

The hp part in php means Hypertext Preprocessor, as in it preprocesses the hypertext. It doesn't work within a script. However, you can use it to write data to an element in the hypertext and then access that from a script. As long as you put the hypertext before the script in the document, you shouldn't have to wait for the entire document to load. ~~$(document).ready()~~

Also, if you're going to use $(this) multiple times, it's recommended that you save it as a variable to save redundant jquery function calls. I find future self appreciates if you name it something more descriptive than $this.

Oh yeah, and .includes(). It's a cleaner way of saying .index() > -1.

answered Oct 19, 2018 at 23:55

poorly-written-code

1,0731 gold badge7 silver badges10 bronze badges

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

1 Comment

ultraloveninja Over a year ago

Thanks! Yeah, get_categories doesn't come back as json, so that's why it needs to be encoded or parsed out in some way. But this does help tidy up the jQuery part of it.

ultraloveninja · Accepted Answer · 2018-10-25 13:07:21Z

0

Figured it out with this:

<?php 
$test = get_categories('taxonomy=item&type=things');
$names = array_column($test, 'name'); ?>

<script type="text/javascript">
jQuery(document).ready(function($) {
  var $things = <?php echo json_encode($names); ?>;
  console.log($things);
  $(".element").each(function() {
    var $state = $(this).attr("title");
    if ($things.indexOf($state) > -1) {
      $(this).addClass('current');
    }
  });
});
</script>

From here: Using jQuery script with WordPress foreach loop

answered Oct 25, 2018 at 13:07

ultraloveninja

2,1397 gold badges35 silver badges71 bronze badges

Collectives™ on Stack Overflow

Using json_encode with PHP to add a class in another div with jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related