在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