patternphpMinor

Listing with JSON or plain HTML

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

plainwithlistingjsonhtml

Problem

I have a website which has reviews about games. Right now, to list the advantages (+) and disadvantages (-) of that game, there's a textarea in the admin panel with a WYSIWYG editor with only element. So my users list their (+) with list elements :


    Game is too slow
    Game is very hard

I want to update it and I was wondering if it wouldn't be a better way to have input fields to add their (+) and (-) about the game and each time they want to add one, they click on a button which adds an input field. Then, when the form is submitted, I could encode the datas with JSON like :

[
    ['Game is too slow'],
    ['Game is very hard']
]

Would be like:

 +

$('[data-add]').click(function(){
    $(this).before('')
});

and then:

// encode    
$list = json_encode($_POST['advantages']);
//decode
echo '';
foreach($list as $item) {
    echo ''.$item.'';
}
echo '';

And when I want to show the datas, I could decode them and display them as a list, which would be like the first option. My point would be to get rid of the WYSIWYG and maybe have a more flexible system.

What do you think?

Solution

First of all, there's a problem with the HTML approach you have:

That's risky (XSS most of the time)

Do you expect them to be web developers? I can be a gamer/reviewer with zero HTML knowledge.

We're writing a review, we should only write reviews, not HTML. Leave HTML to the developers.

Now, as you said, you can do JSON, and your other approach seems to be right:

Form


  Advantages
  Add // get nextAll advantages, find the last and append after
  
  
  

  Disadvantages
  Add // get nextAll disadvantages, find the last and append after

Data structure to server

{
  advantages : ['foo','bar','baz'],
  disadvantages : ['foo','bar','baz']
}

Code Snippets

<form>
  <h3>Advantages</h3>
  <button>Add</button> // get nextAll advantages, find the last and append after
  <input type="text" name="advantages[]" />
  <input type="text" name="advantages[]" />
  <input type="text" name="advantages[]" />

  <h3>Disadvantages</h3>
  <button>Add</button> // get nextAll disadvantages, find the last and append after
  <input type="text" name="disadvantages[]" />
  <input type="text" name="disadvantages[]" />
  <input type="text" name="disadvantages[]" />
</form>

{
  advantages : ['foo','bar','baz'],
  disadvantages : ['foo','bar','baz']
}

Context

StackExchange Code Review Q#42637, answer score: 3

Revisions (0)

No revisions yet.