3

こんにちは、ネストされた JSON データをビューに表示しようとしています。これは、API から応答を受け取ったときに高度な REST クライアントに表示されるのと同じです。

基本的に私が求めているのと同じことを尋ねるこの質問を見つけました。ただし、結果を Play Framework 2.3.x を使用してビューに表示したいと考えています。すべての json オブジェクトを表示するには再帰関数が必要であることはわかっているので、ビューで再利用可能なブロックを使用してみました。これが私が今持っているものです：

@(fromAPI: com.fasterxml.jackson.databind.JsonNode)

@import com.fasterxml.jackson.databind.JsonNode

@walkJsonTree(name: String, node: JsonNode) = {

    @if(node.isObject()) {

        @for(nodeEntry <- node.fields()) {
            <li>@nodeEntry.getKey(): </li>
            <ul>@walkJsonTree(nodeEntry.getKey(), nodeEntry.getValue())</ul>
        }
    }
    @if(node.isArray()) {
        @for(arrayNode <- node.fields()) {
            <li>[List]: </li>
            <ul>@walkJsonTree(arrayNode.getKey(), arrayNode.getValue())</ul>
        }
    }
    @if(node.isValueNode()) {
        <li>@node.asText()</li>
    } else {
        @* other *@
        <li>@node.asText()</li>
    }

}

@main("API Response") {

    <div class="container">
        <h3>API Response</h3>

        <ul>
            @walkJsonTree(null, fromAPI)
        </ul>
    </div>
}

残念ながら、これは JSON を正しく表示していません。この行に基づく最初のオブジェクトの名前のみが表示されます<li>@nodeEntry.getKey(): </li>。私は何を間違っていますか？JSON をネストされた方法で表示するための他の提案はありますか?

ありがとう！

4

1 に答える 1

1

「配列」ifブロックが間違っていました。elements()ではなく関数を使用する必要がありますfields()。これは、このリファクタリング<ul>と<li>要素のその他のクリーンアップを含む、私のコードの更新バージョンです

@(fromAPI: com.fasterxml.jackson.databind.JsonNode)

@import com.fasterxml.jackson.databind.JsonNode

@walkJsonTree(name: String, node: JsonNode) = {

    @if(node.isObject()) {
        <ul>
            @for(nodeEntry <- node.fields()) {
                <li>@nodeEntry.getKey(): @walkJsonTree(nodeEntry.getKey(), nodeEntry.getValue())</li>
            }
        </ul>
    }
    @if(node.isArray()) {
        <ul>
            @for(arrayNode <- node.elements()) {
                <li>[List]: @walkJsonTree(name, arrayNode)</li>
            }
        </ul>
    }
    @if(node.isValueNode()) {
        @node.asText()
    } else {
        @* other *@
        @node.asText()
    }

}

@main("API Response") {

    <div class="container">
        <h3>API Response</h3>
        @walkJsonTree(null, fromAPI) 
    </div>
}

これはおそらく美的に改善される可能性がありますが、私が望んでいた最小限の機能を満たしています

于 2015-04-11T00:05:12.477 に答える