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. jsonparseronline.com — Geoff
– Geoff, Commented Jun 12, 2018 at 8:55
The problem is that I am not sure how to write the JSON when i have many nested classes like these. — Bojan Kolano
– Bojan Kolano, Commented Jun 12, 2018 at 9:13

Eldelshell · Accepted Answer · 2018-06-12 10:23:03Z

0

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" ] }
    ]
}

edited Jun 12, 2018 at 10:23

Eldelshell

6,9908 gold badges47 silver badges64 bronze badges

answered Jun 12, 2018 at 10:14

HtooEainLwin

639 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related