jquery - JQuery レスポンスを解析して提示する方法

Question

WebMethod への Ajax 呼び出しの後に JSON 応答を受け取り、それを解析して、次の形式の div タグでデータを表示したいと考えています (div タグは動的に作成する必要があります)。以下の太字の属性は、JSON 応答の同等のプロパティに置き換える必要があります。各ニュース項目 (JSON 応答で { } でカプセル化) は、1 つのリスト要素に対応します。データの表示方法は次のとおりです。

<div class="articleList-list"> 
                <ul>
                    <li>
                        <div class="articleList-image">
                            <img src="**ImageSource**" width="150px" height="100px" alt="the article's image" />
                        </div>
                        <div class="articleList-article">
                            <h3><a href="**UrlForNewsitem**">**OverskriftArticleData**</a></h3>
                            <p>**Ingress**</p>
                        </div>                
                    </li>
                    <li>
                        <div class="articleList-image">
                            <img src="#" width="150px" height="100px" alt="the article's image" />
                        </div>
                        <div class="articleList-article">
                            <h3><a href="#">Artikkel nummer 2s tittel</a></h3>
                            <p>Et kort sammendrag av hva artikkelen handler om, eller starten på selve artikkelen. 
                            Dette skal ligge til ventstre i hovedinnholdet, til høyre for artikkelens bilde og oversikten over alle artikkel-kategorier.</p>
                        </div>                
                    </li>
                </ul>
            </div>

JSON 応答は次のとおりです。

[{"ImageSource":"/ImageVaultFiles/id_1/cf_2/Person.JPG","OverskriftArticleData":"ArtikelOverskrift","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2816&epslanguage=en","ByLineOfArticle":"ForfattareByline","Ingress":"Detta ær ingressen till artikeln"},{"ImageSource":"/ImageVaultFiles/id_10/cf_2/city.JPG","OverskriftArticleData":"Rubrik","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2814&epslanguage=en","ByLineOfArticle":"Anders B","Ingress":"Testar ingress"}]

JQuery 応答をきちんと効率的に解析して提示するにはどうすればよいですか?

Answer 1

応答が有効な JSON であると仮定すると、解析する必要はありません。これは有効な JavaScript オブジェクトであるため、直接使用できます。応答は単一のオブジェクトを持つ配列のように見えるため、次のように使用できます。

data = [{"ImageSource":"/ImageVaultFiles/id_1/cf_2/Person.JPG","OverskriftArticleData":"ArtikelOverskrift","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2816&epslanguage=en","ByLineOfArticle":"ForfattareByline","Ingress":"Detta ær ingressen till artikeln"},{"ImageSource":"/ImageVaultFiles/id_10/cf_2/city.JPG","OverskriftArticleData":"Rubrik","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2814&epslanguage=en","ByLineOfArticle":"Anders B","Ingress":"Testar ingress"}];
var imgSource = data[0].ImageSource;

等々。

Answer 2

jQueryを使用して実際にAjax呼び出しを行うと仮定すると、追加のpostパラメーターを渡して、自動的にデコードし、コールバック関数に渡すことができます。

$.post('/someUrl/', {some: 'object params'}, function myCallback(data) {
  /* here the data variable is an object */
  alert(data.something);
}, 'json');

これは、事実上、のPOSTバージョンです$.getJSON。

Answer 3

JSON 応答を受け取った後、これが呼び出されます。

function ParseAndPresentJquery(stringToParse, hrefNameOfTab) 
    {
        data = JSON.parse(stringToParse);

        var src = "<div class='articleList-list'><ul>";

        for (var j = 0; j < data.length; j++) {
            src += "<li><div class='articleList-article'><h3><a href='" + data[j].UrlForNewsitem + "'>";
            src += data[j].OverskriftArticleData + "</a></h3></div>";
            src += "<p>";
            src+= data[j].Ingress;
            src += "</p>";
            src += "</div></li>";
        }
        src += "</ul></div>";
        $(hrefNameOfTab).html("");
        $(hrefNameOfTab).append(src);
    }

Answer 4

jQuery parseJSON 関数を使用できます。ここで詳細を読むことができますhttp://api.jquery.com/jQuery.parseJSON/

var obj = jQuery.parseJSON(response_json);
//Now use the various properties of object which contain the values of json response.

$("articleList-article > img")[0].attribute("src", obj.ImageSource);

//And so on

また、次のように簡単に使用できます。

data = [{"ImageSource":"/ImageVaultFiles/id_1/cf_2/Person.JPG","OverskriftArticleData":"ArtikelOverskrift","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2816&epslanguage=en","ByLineOfArticle":"ForfattareByline","Ingress":"Detta ær ingressen till artikeln"},{"ImageSource":"/ImageVaultFiles/id_10/cf_2/city.JPG","OverskriftArticleData":"Rubrik","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2814&epslanguage=en","ByLineOfArticle":"Anders B","Ingress":"Testar ingress"}];
$("articleList-article > img")[0].attribute("src", data[0].ImageSource);

Answer 5

テンプレート、google .tmpl() または JsRender を使用する