Question

这是多维数组。我相信这是有效的，我只是把它作为对象中的一个对象，但是赋值需要一个数组。

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

以下是我添加页脚文本的功能。我认为getElementById会工作，并尝试在footerText周围添加[]但没有任何工作。我错过了什么？

     // 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;
              
            }
         }
        }

Answer 1

试试这个：

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

JSBin

由于您已将版权信息对象包装在数组中 - 这是footerText中唯一的数组 - 您必须在链中引用它。

所以基本上链条就是：

得到回复 - content
获取所需对象 - content.footerText
获取第一个（且仅限）数组 - content.footerText[0]
从数组中的对象中获取所需的值 - content.footerText[0].footer

Answer 2

确保this.responseText包含您的JSON数据字符串。
您将JSON.parse的输出分配给footerText，这意味着footerText现在是一个代表您的JSON数据的对象。
这意味着引用您想要的字段就像：footerText.content.footerText[0].footer

Answer 3

试试这个

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

Answer 4

由于ajax请求无法复制，我只是创建了一个包含所有数据的本地对象。在底部，您可以看到如何到达响应对象的路径以在您提到的div中显示页脚文本。

＆＃13;

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;

＆＃13;

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

＆＃13;

你如何在javascript / ajax中调用多维数组（即.json文件中）？

4 个答案: