6
votes

Comment analyser le JSON multidimensionnel à HTML facilement?

Je veux analyser facilement Json à HTML. J'ai un Json multidimensionnel. Je veux donc analyser cela à HTML facilement. Tout plugin ou tout code simple est disponible? Le fichier JSON suivant.

<ul>
        <li>India</li>
 <ul>
        <li>State1 :capital</li>
        <li>State2 :capita2</li>

</ul>
        <li>USA</li>
 <ul>
        <li>State1 :capital</li>
        <li>State2 :capita2</li>

</ul>

</ul>

jquery json multidimensional-array

1 commentaires

Il devrait être générique pour un autre format JSON ou juste celui-ci?

5 Réponses :

4
votes

1- Tableaux d'itéréter avec foreach code> 2- Vérifiez l'existence de clés dans des dictionnaires en utilisant objet.hasownProperty code> 3- Créer des éléments HTML avec $ ("") code> 4- String de construction dans le format souhaité. Vous pouvez essayer ce script:

<ul>
<li>India</li>
<ul><li>State 1 : New Delhi</li><li>State 2 : Chennai</li></ul>
<li>USA</li>
<ul><li>State 1 : Montgomery</li><li>State 2 : Juneau</li></ul>
</ul>

1 commentaires

Celui-ci est un excellent exemple autonome.

2
votes

Version JQuery de ce problème (échantillon en direct):

.appendto code> pour ajouter un enfant à un parent li >

   .text  code>  pour définir le contenu du texte d'un élément  li >
 ul>   p> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul></ul>

0 commentaires

7
votes

Vous pouvez utiliser jQuery jpout plugin ( http://plugins.jquerery.com/jput/ )

http://jsfiddle.net/mse255ko/1/ p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://shabeer-ali-m.github.io/jPut/js/jput.min.js"></script>
<div id="maindiv">
    <div jput="template1">
    <ul>
        <li>{{country}}</li>
        <ul>
            <li>State 1 Name : {{state.0.name}}, Capital : {{state.0.capital}}</li>
             <li>State 2 Name : {{state.1.name}}, Capital : {{state.1.capital}}</li>
        </ul>
    </ul>
    </div>    
</div>

2 commentaires

Vous avez besoin d'une boucle de forach ... Ce n'est pas exactement la meilleure réponse

@vsync Si nous utilisons plugin Qu'est-ce que l'utilisation de la boucle de Foreach

5
votes

Veuillez utiliser JQuery chacun pour boucler les données JSON, ici lors de chaque itération, la valeur HTML variable est concaténée. Vous pouvez donc ajouter à n'importe quel DIV.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="result-div"></div>

0 commentaires

0
votes

Bien sûr, vous pouvez également utiliser angularjs pour cela, c'est l'un des points principaux de l'angulaire qu'il est très facile de lier des données.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="bindData">
<ul ng-repeat="c in countries">
	<li>{{c.country}}</li>
	<ul>
		<li ng-repeat="s in c.state">{{s.name}} :{{s.capital}}</li>
	</ul>
</ul>
</div>

0 commentaires