How can I count the values of a json array and list them with html?

Question

How can I count the values of a json array and list them with html?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have the following json "files", I'm only interested in counting the typedescrip to make a list with them to know how many types I have

I'm using angular to build my functions

suggestions are accepted

{
    "archivos": [
        {
            "nombre": "eir 2018, 1799.pdf",
            "id": "1595146",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "COVE"
        },
        {
            "nombre": "SIM38434308002358.pdf",
            "id": "1585738",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Pedimento"
        },
        {
            "nombre": "ORD38434308002358.pdf",
            "id": "1585739",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Pedimento Aduanal"
        },        
        {
            "nombre": "h3412724.pdf",
            "id": "1591453",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "nombre": "h3412724.xml",
            "id": "1591454",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "xml2.png",
            "tipodescrip": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "nombre": "20180427145021682O.xml",
            "id": "1572837",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.xml",
            "mime": "xml2.png",
            "tipodescrip": "COVE"
        }
    ]
}

So I get the files

  var oficina = localStorage.getItem("numoficina");
    var vgget = globales[urlgetarchivos][oficina];
    $http({
        url: vgget,
        method: "POST",
        data: {
            referencia: ref
        },
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'dataType': 'json'
        }
    })
   .success(function (response) {

       console.log(response.archivos);

       var r = response.archivos;

       console.log(r);

       $scope.itemsarchivo = r;


   }).catch(function (error) {
       console.log(error);
       //alert("Error: " + error);
   });

I would like to create one to put inside the name of the file type and inside the path of the file to consult it

I appreciate the support

javascript json

asked by emanuelle 12.07.2018 в 18:00

source

2 answers

0

I do not know if I understand your question very well but I hope it will help you, I would recommend you to make a list of items to a file JSON that you already have established, a request get in the following way.

data.json

{
    "archivos": [
        {
            "nombre": "eir 2018, 1799.pdf",
            "id": "1595146",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "COVE"
        },
        {
            "nombre": "SIM38434308002358.pdf",
            "id": "1585738",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Pedimento"
        },
        {
            "nombre": "ORD38434308002358.pdf",
            "id": "1585739",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Pedimento Aduanal"
        },        
        {
            "nombre": "h3412724.pdf",
            "id": "1591453",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "nombre": "h3412724.xml",
            "id": "1591454",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "xml2.png",
            "tipodescrip": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "nombre": "20180427145021682O.xml",
            "id": "1572837",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.xml",
            "mime": "xml2.png",
            "tipodescrip": "COVE"
        }
    ]
}

var app = angular.module("myApp", []);
 
app.controller("myCtrl", function ($scope, $http) {
    //vamos a hacer uso de $http para obtener los datos
    $http.get('data.json').then(function (res) {
    //enviamos los datos a la vista con el objeto $scope
        $scope.datos = res.data.archivos;
    }, function(res){
        console.log('Fallo la busqueda');
    });

 });

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-controller="myCtrl" ng-app="myApp">
    <select ng-model="selectName">
        <option ng-repeat="t in datos" value="{{ t.id }}">{{ t.tipodescrip }}</option>
    </select>
    <select ng-model="selectPath">
        <option ng-repeat="p in datos" value="{{ p.id }}">{{ p.path }}</option>
    </select>
</body>

</html>

PS: In order for the code to work for you, you have to call the route where this JSON is found, I am attentive to any question.

answered by 12.07.2018 в 21:57

How can I create a completed auto in a JavaFX TextArea? why when I try to open my excel document (generated by a Jtable) does it mark me an error?

score 0 · Accepted Answer

Here's my suggestion:

var data = {
    "archivos": [
        {
            "nombre": "eir 2018, 1799.pdf",
            "id": "1595146",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "COVE"
        },
        {
            "nombre": "SIM38434308002358.pdf",
            "id": "1585738",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Pedimento"
        },
        {
            "nombre": "ORD38434308002358.pdf",
            "id": "1585739",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Pedimento Aduanal"
        },        
        {
            "nombre": "h3412724.pdf",
            "id": "1591453",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "pdf.png",
            "tipodescrip": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "nombre": "h3412724.xml",
            "id": "1591454",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.pdf",
            "mime": "xml2.png",
            "tipodescrip": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "nombre": "20180427145021682O.xml",
            "id": "1572837",
            "path": "http://4chan.org//1bd4c703-08f4-470a-80b6-0f48d0c5a547.xml",
            "mime": "xml2.png",
            "tipodescrip": "COVE"
        }
    ]
}
var tiposdescrip = [];
data.archivos.forEach(function(archivo) {  
  if(tiposdescrip.indexOf(archivo.tipodescrip) == -1) {
    tiposdescrip.push(archivo.tipodescrip);
    var ul = document.getElementById("lista");
     var li = document.createElement("li");
     li.appendChild(document.createTextNode(archivo.tipodescrip));
     ul.appendChild(li);
  }
});
document.getElementById("total").innerHTML = "Total: " + tiposdescrip.length;

<p id="total"></p>
<ul id="lista"></ul>