How do you call a multi-dimensional array (that is in .json file) in javascript/ajax?

Question

This is the multi-dimensional array. I believe that this is working, I just had it all working as a object within objects, but the assignment requires an array.

{
    "content" :  {
    "bio": [
    {"h1": "Modern . Creative . Reliable"},
       {"h2": "Hello, my name is Sarah LeBret"},
       {"p": "I make art the modern way. I have been an artist since I was 14 and still to this day enjoy throwing paint at a canvas... but I decided to use my crazy creativity to make art with the other invention I love. Techonolgy is always envolving and I wanted to be a part of that world. Being a Web Designer/ Graphic Designer for me is what dreams are made of. I let the right side of my brain take over and create elegant modern designs for clients."}
    ],
  "projects": [
      {"h1": "Projects by Sarah LeBret"},
      {"h3":"Set Sail Painting"},
      {"p":"This painting I created in my short experince of taking Fine Arts in the Georgian College program. The emotion captured was 'Anxiety'. This shows my love for moderized bold art."},
      {"h3":"King Walrus Design Logo"},
      {"p":"This logo was created using Adobe Illustrator in my first semester at Georgian College in my current program: Interactive Media Design-Web."},
      {"h3":"Mood Board Design"},
      {"p":"<small>This mood board was created in my Design Principles class to experiement what it would be like to create one for a client. I used many references for inspiration and was very proud of my outcome.</small>"}
  ],
  "footerText": [
      {"footer":"Copyright © 2016-2017 King Walrus Design"}
  ]
  }
    
}

Here is what I have for the function to add the footer text. I thought that the getElementById would work, and tried adding [] around footerText but nothing is working. What am I missing?

     // Fill footer
        function fillFooter(){ 
        var XHR = new XMLHttpRequest();
        let myFooter = {};
        XHR.open("GET","./content.json");
        XHR.send();
        XHR.onreadystatechange=function(){
            if((XHR.status===200)&&(XHR.readyState===4))
            {
                footerText = JSON.parse(this.responseText);
                document.getElementById("websiteFooter").innerHTML = content.["footerText"].footer;
              
            }
         }
        }

Possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Heretic Monkey, Mar 22 '17 at 18:00

Zoltan Toth · Answer 1 · 2017-03-22T18:06:06.903

0

Try this:

document.getElementById("websiteFooter").innerHTML = content.footerText[0].footer;

JSBin

Since you have wrapped your copyright info object in array - and that's the only array in footerText - you have to refer it in your chain.

So basically the chain goes:

get the response - content
get the required object - content.footerText
get the first (and only) array in it - content.footerText[0]
get the desired value out of the object in the array - content.footerText[0].footer

edited Mar 22 '17 at 18:06

answered Mar 22 '17 at 17:55

Zoltan Toth

46,981
12
120
134

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See [this Meta question and its answers](http://meta.stackoverflow.com/q/256359/215552) for more information. – Heretic Monkey Mar 22 '17 at 17:59

score 0 · Answer 2 · answered Mar 22 '17 at 17:59

Ensure this.responseText contains your JSON data as a string.
You're assigning the output of JSON.parse to footerText, which means footerText is now an object which represents your JSON data.
This means referencing the field you desire would be like: footerText.content.footerText[0].footer

score 0 · Accepted Answer · answered Mar 22 '17 at 17:59

0

try this

            footerText = JSON.parse(this.responseText);
            document.getElementById("websiteFooter").innerHTML = footerText .content.footerText.footer;

answered Mar 22 '17 at 17:59

M. Alim

153
16

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See [this Meta question and its answers](http://meta.stackoverflow.com/q/256359/215552) for more information. Perhaps while you're explaining it you'll notice the errors you have. – Heretic Monkey Mar 22 '17 at 18:01

score 0 · Answer 4 · answered Mar 22 '17 at 18:00

Because ajax request couldn't be reproduced I've just created a local object with all the data. At the bottom you can see how to get to the path of the response object to show the footer text in the div you mentioned.

var response = {
  "content": {
    "bio": [{
        "h1": "Modern . Creative . Reliable"
      },
      {
        "h2": "Hello, my name is Sarah LeBret"
      },
      {
        "p": "I make art the modern way. I have been an artist since I was 14 and still to this day enjoy throwing paint at a canvas... but I decided to use my crazy creativity to make art with the other invention I love. Techonolgy is always envolving and I wanted to be a part of that world. Being a Web Designer/ Graphic Designer for me is what dreams are made of. I let the right side of my brain take over and create elegant modern designs for clients."
      }
    ],
    "projects": [{
        "h1": "Projects by Sarah LeBret"
      },
      {
        "h3": "Set Sail Painting"
      },
      {
        "p": "This painting I created in my short experince of taking Fine Arts in the Georgian College program. The emotion captured was 'Anxiety'. This shows my love for moderized bold art."
      },
      {
        "h3": "King Walrus Design Logo"
      },
      {
        "p": "This logo was created using Adobe Illustrator in my first semester at Georgian College in my current program: Interactive Media Design-Web."
      },
      {
        "h3": "Mood Board Design"
      },
      {
        "p": "<small>This mood board was created in my Design Principles class to experiement what it would be like to create one for a client. I used many references for inspiration and was very proud of my outcome.</small>"
      }
    ],
    "footerText": [{
      "footer": "Copyright © 2016-2017 King Walrus Design"
    }]
  }

};

console.log(response);

document.querySelector("#websiteFooter").innerHTML = response.content.footerText[0].footer;

<div id="websiteFooter"></div>

How do you call a multi-dimensional array (that is in .json file) in javascript/ajax?

4 Answers4