I have a issue with making JSON with nested classes out of my html code

Question

This is the JSON and the html code... I've tried many things but I can't get it to work. I am new at JSON and I can do with simple class but with these nested classes I have an issue ... Would appreciate any help I can get.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css? 
    family=Lato:300,400,700,900" rel="stylesheet">  <link rel="stylesheet" 
href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="script/script.js"></script>
<title>Grean Earth</title>
</head>
    <body>
        <section id="hero">
            <ul id="heroSlajder">
                <li class="sliderPics ">
                    <img class="sliderPictures " src="">
                </li>
                <li class="sliderPics showing">
                    <img class="sliderPictures " src="">
                </li>
                <li class="sliderPics ">
                    <img class="sliderPictures" src="">
                </li>
        </ul>
    </body>
</html>

JSON:

{
  "hero": {
    "heroSlajder": [ {
      "sliderPics":[ {
        "sliderPictures": "./images/img/slider-1.png"
      }
      ]],
      "heroSlajder": [ {
        "sliderPics":[ {
          "sliderPictures": "./images/img/slider-2.png"
        }
        ]],
        "heroSlajder": [ {
          "sliderPics":[ {
            "sliderPictures": "./images/img/slider-3.png"
          }
          ]]
        }
      }

This is the JavaScript function that I use to get images from JSON:

$(document).ready( function () { 
     var obj = JSON.parse(db); heroDivData(obj); 

     function heroDivData(obj){ for (i in obj.hero.heroSlajder.sliderPics){ 
        var j  = parseInt(i)+1; 
        $('.sliderPics:nthchild('+j+').sliderPictures').attr('src',obj.hero.heroSlajder.sliderPics[i].sliderPictures); } }

Update: I tried this but still nothing

{
"hero": [ {
    "heroSlajder": [ {
        "sliderPics":[ {
            "sliderPictures": "./images/img/slider-1.png"
        }
        ,
        {
            "sliderPictures": "./images/img/slider-2.png"
        }
        ,
        {
            "sliderPictures": "./images/img/slider-3.png"
        }
        ]
    }
    ]
}]

}

You can use an online parser like the following to check the correctness. http://jsonparseronline.com/ — Geoff, Jun 12 '18 at 08:55
The problem is that I am not sure how to write the JSON when i have many nested classes like these. — Bojan Kolano, Jun 12 '18 at 09:13
@Roy Not exactly sure what you mean but this is the JavaScript code i am using to get the images form JSON. — Bojan Kolano, Jun 12 '18 at 09:34
$(document).ready( function () { var obj = JSON.parse(db); heroDivData(obj); function heroDivData(obj){ for (i in obj.hero.heroSlajder.sliderPics){ var j = parseInt(i)+1; $('.sliderPics:nth-child('+ j +').sliderPictures').attr('src',obj.hero.heroSlajder.sliderPics[i].sliderPictures); } } — Bojan Kolano, Jun 12 '18 at 09:34
The JSON is wrong parsed. And why do you have 3 heroSlajder with sliderPics with sliderPictures? Is better put every slide on a single parent right? — Roy Bogado, Jun 12 '18 at 10:14

score 0 · Answer 1 · edited Jun 12 '18 at 10:23

Hope this answer your question.

Arrays in JSON are almost the same as arrays in JavaScript.

In JSON, array values must be of type string, number, object, array, boolean or null.

In JavaScript, array values can be all of the above, plus any other valid JavaScript expression, including functions, dates, and undefined.

For example:

{
    "name": "John",
    "age": 30,
    "cars": [ "Ford", "BMW", "Fiat" ]
}

Nested Arrays in JSON Objects Values in an array can also be another array, or even another JSON object:

myObj = {
    "name":"John",
    "age":30,
    "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda" ] }
    ]
}

I have a issue with making JSON with nested classes out of my html code

1 Answers1