在jQuery中過濾JSON回復

Question

我正在嘗試過濾掉從JSON查詢到Glosbe.com API的答復。

目前，我已經能夠將JSON分解為僅接收含義，但是我不確定如何刪除JSON響應的所有逗號和其他方面。 我基本上只想在一行上顯示每個含義。

jQuery代碼：

$(document).ready(function(){

$('#term').focus(function(){
var full = $("#definition").has("definition").length ? true : false;
if(full === false){
 $('#definition').empty();
 }
});

var getDefinition = function(){

 var word = $('#term').val();

  if(word === ''){

    $('#definition').html("<h2 class='loading'>We haven't forgotten to validate the form! Please enter a word.</h2>");

  } 

   else {

    $('#definition').html("<h2 class='loading'>Your definition is on its way!</h2>");

    $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=" +word+ "&pretty=true&callback=?", function(json) {

       if (json !== "No definition has been found."){

           var reply = JSON.stringify(json,null,"\t");
           var n = reply.indexOf("meanings");
           var sub = reply.substring(n+8,reply.length);
           var subn = sub.indexOf("]");
           sub = sub.substring(0,subn);

             $('#definition').html('<h2 class="loading">We found you a definition!</h2>  <h3>'+sub+'</h3>');

          } 

else {
             $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=rus&format=json&phrase=&pretty=true" + "?callback=?", function(json) {
                console.log(json);
                $('#definition').html('<h2 class="loading">Nothing found.</h2><img   id="thedefinition" src=' + json.definition[0].image.url + ' />');
             });
          }
     });

  }

return false;
};

$('#search').click(getDefinition);
$('#term').keyup(function(event){
if(event.keyCode === 13){
   getDefinition();
}
});

});

HTML頁面：

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Matthew Hughes">
<title>Dictionary Web Application</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script src="dictionary.js"></script>
<link rel="stylesheet" href="style.css" />

</head>

<body>

<div id="container">
    <header>
        <h1>Dictionary Application</h1>
    </header>
    <section id="fetch">
        <input type="text" placeholder="Enter a word..." id="term" />
        <button id="search">Define!</button>
    </section>
    <section id="definition">
    </section>
    <footer>
        <p>Created by Matthew & Spencer</p>
    </footer>
</div>

謝謝。

Answer 1

JSON是JavaScript對象表示法。 您可以使用它來發送JavaScript對象。 您應該利用此優勢，而不是將其弄平並弄亂字符串解析。

您的json變量包含以下內容：

{
...
"tuc": [
    {
        "authors": [
            1
        ],
        "meaningId": null,
        "meanings": [
            {
                "language": "eng",
                "text": "The process of applying a test as a means of analysis or diagnosis."
            },
            {
                "language": "eng",
                "text": "difficult, tough"
            },
            {
                "language": "eng",
                "text": "Present participle of test."
            },
            {
                "language": "eng",
                "text": "The act of conducting a test; trialing, proving"
            }
        ]
    },
    ...
    ]
    }

您可以使用json["tuc"]訪問具有含義的部分； 每個都包含一個意義數組（即json["tuc"][0]["meanings"] ）。 您可以遍歷所有這些內容並提取text屬性以構建您的輸出。

例如，在.getJSON內部，一旦您確認確實有數據：

    var meanings = "";
    json["tuc"].forEach(function(tuc) {
        tuc["meanings"].forEach(function(m) {
            meanings += "<p>"+m["text"]+"</p>\n";
        });
    });
    $("#definition").html(meanings);

在jQuery中過濾JSON回復

問題描述

1 個解決方案

解決方案1
4 已采納 2014-03-13 17:50:12

在jQuery中過濾JSON回復

問題描述

1 個解決方案

解決方案1 4 已采納 2014-03-13 17:50:12

解決方案1
4 已采納 2014-03-13 17:50:12