format json return with javascript

Question

I have the following code

function functionCLick(name) {  
   $.getJSON('livros.json', function(data){
       $.each(data, function(i, item){
            if(item.name == name){
                $("#conteudo").html("<p>"+item.chapters+"</p>");
            }
       });
    });
 }

follows a part of json

[
    {
        "abbrev": "hob", 
        "chapters": [
            [
                "exemplo1.",
                "exemplo2.",
                "exemplo3."

            ],
            [
                "exemplo4.",
                "exemplo5.",
                "exemplo6."
            ] 
        ],
        "name": "hoobit"
    },
]

my doubt is the following I wanted to know if you have how to format the output. My browser output is the following it inserts into html all the content that is in Chapters including it also shows the commas json end of line example: 1. ,exemple2. ,exemple3. ,exemple4. ,exemple5. ,exemple6. it returns me the commas that are at the end of each line of the Chapters json. I thought about removing all the commas with jquery but thinking, the text may have some comma that cannot be removed. And another doubt I can break Chapters

Answer 1

The item.chapters is returning the two arrays, soon will come separated by commas, including the values of each one. What you need to do is another .each to return the subarrays and their values within each paragraph:

I put a comma in exemplo1 and exemplo5 to show that the commas within values are not affected.

var data = [
    {
        "abbrev": "hob", 
        "chapters": [
            [
                "exemplo1,.",
                "exemplo2.",
                "exemplo3."

            ],
            [
                "exemplo4.",
                "exemplo5,.",
                "exemplo6."
            ] 
        ],
        "name": "hoobit"
    },
]
var name = "hoobit";
var chaps = ''; //  cria a variável vazia onde será armazenado o HTML
$.each(data, function(i, item){
   if(item.name == name){
      $.each(item.chapters, function(idx){
         $.each(item.chapters[idx], function(c, v){
            $("#conteudo").append("<p>"+v+"</p>");
         });
      });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteudo"></div>