如果有多个密钥,如何从JSON中的密钥输出所需数据

时间:2018-03-14 10:01:46

标签: javascript html json api

我想从以下网址输出lyrics_body密钥的数据。API Link

但该URL上的JSON文本如下所示。

{
 "message": {
    "header": {
          "status_code": 200,
          "execute_time": 0.0047609806060791
     },
    "body": {
       "lyrics": {
          "lyrics_id": 16894378,
          "can_edit": 0,
          "locked": 0,
          "published_status": 8,
          "action_requested": "",
          "verified": 0,
          "restricted": 0,
          "instrumental": 0,
          "explicit": 1,
          "lyrics_body": "Kis Tarah Main Bataoon\nKee Adhura Main Hoon\nYah 
          Yakeen Dilaoon\nBana Tere Lie Hee Main Hoon\nMamam. Ab Yah Hee Hai 
          Meree Khvaahish\nIs Pal Ko Toh Main Jee Loon\n\nTu Iss Jagah Hai 
          Khada\nPhir Bhi Hai Door Tu Haan\nKuch Na Raha Darmiyaan\nPhir Kyun 
          Dil Keh Raha\n\nO Saathi…Itna Toh Bas Kar De\n...\n\n******* This 
          Lyrics is NOT for Commercial use *******",
          "lyrics_language": "",
          "lyrics_language_description": "",
          "lyrics_copyright": "Lyrics powered by www.musixmatch.com. This Lyrics 
          is NOT for Commercial use and only 30% of the lyrics are returned.",
          "writer_list": [],
          "publisher_list": [],
          "backlink_url": "https://www.musixmatch.com/lyrics/Arijit-Singh/O-
          Saathi?utm_source=application&utm_campaign=api&utm_medium=",
          "updated_time": "2017-07-26T07:05:50Z"
        }
     }
   }
}

现在我怎样才能将lyrics_body键中的文本输出到具有id="result"的div元素。我尝试了很多方法但没有输出。

4 个答案:

答案 0 :(得分:1)

通过点表示法访问嵌套的json键:json.message.body.lyrics.lyrics_body

使用.innerText将文字附加到元素。使用.getElementById("")id属性查找元素。

var json = {
     "message": {
        "header": {
              "status_code": 200,
              "execute_time": 0.0047609806060791
         },
        "body": {
           "lyrics": {
              "lyrics_id": 16894378,
              "can_edit": 0,
              "locked": 0,
              "published_status": 8,
              "action_requested": "",
              "verified": 0,
              "restricted": 0,
              "instrumental": 0,
              "explicit": 1,
              "lyrics_body": "Kis Tarah Main Bataoon\nKee Adhura Main Hoon\nYah Yakeen Dilaoon\nBana Tere Lie Hee Main Hoon\nMamam. Ab Yah Hee Hai Meree Khvaahish\nIs Pal Ko Toh Main Jee Loon\n\nTu Iss Jagah Hai Khada\nPhir Bhi Hai Door Tu Haan\nKuch Na Raha Darmiyaan\nPhir Kyun Dil Keh Raha\n\nO Saathi…Itna Toh Bas Kar De\n...\n\n******* This Lyrics is NOT for Commercial use *******",
              "lyrics_language": "",
              "lyrics_language_description": "",
              "lyrics_copyright": "Lyrics powered by www.musixmatch.com. This Lyrics is NOT for Commercial use and only 30% of the lyrics are returned.",
              "writer_list": [],
              "publisher_list": [],
              "backlink_url": "https://www.musixmatch.com/lyrics/Arijit-Singh/O-Saathi?utm_source=application&utm_campaign=api&utm_medium=",
              "updated_time": "2017-07-26T07:05:50Z"
            }
         }
       }
    }
document.getElementById("result").innerText = json.message.body.lyrics.lyrics_body;
<div id="result"></div>

答案 1 :(得分:1)

通过.getJSON获取JSON。解析后将#result解析为data.message.body.lyrics.lyrics_body

var url = 'https://crossorigin.me/https://api.musixmatch.com/ws/1.1/matcher.lyrics.get?callback=format=jsonp&q_track=O%20Saathi&q_artist=Arijit%20Singh&apikey=c12b7dffb9a86d5b6d70e0f0fdeab589'
    $.getJSON(url, function(data) {
        $('#result').text(data.message.body.lyrics.lyrics_body);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">#Result</div>

答案 2 :(得分:1)

    
 $( "#target" ).click(function() {
  var url = 'https://crossorigin.me/https://api.musixmatch.com/ws/1.1/matcher.lyrics.get?callback=format=jsonp&q_track=O%20Saathi&q_artist=Arijit%20Singh&apikey=c12b7dffb9a86d5b6d70e0f0fdeab589'
$.getJSON(url, function(result) {
    console.log(result.message.body.lyrics.lyrics_body)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  Click here
</div>
<div id='data'></div>

答案 3 :(得分:0)

首先,您需要将这些数据存储到变量中。

var myData = {
    //your json data
}

然后console.log(myData.message.body.lyrics.lyrics_body)看看你是否得到了正确的价值。