How to consult an arrangement using one of its fields and display it in html [closed]

Question

How to consult an arrangement using one of its fields and display it in html [closed]

Navigation

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

2

I have the following ARRAY

var array = [
    {"productoId":"4","categoriaId":null,"marcaId":"2"},
    {"productoId":"87","categoriaId":null,"marcaId":"2"},
    {"productoId":"175","categoriaId":null,"marcaId":"20"}
]

This is received by a API as a document .json of a page, now I need to know the values of any product by javascript and put it in a table in HTML , meaning that if I indicate a product code productoId the routine javascript look it up in the array and give it to me to show it in the HTML table.

How can I do it?

javascript html json array

asked by leidy diana arango muñoz 10.05.2017 в 17:03

source

3 answers

3

What you can do is keep the data in the array and when you need to obtain some data you look for the productoId .

For example, the following code searches for the category and brand of the product you enter:

var array = [
    {"productoId":"4","categoriaId":null,"marcaId":"2"},
    {"productoId":"87","categoriaId":null,"marcaId":"2"},
    {"productoId":"175","categoriaId":null,"marcaId":"20"}
]

function showProduct()
{
    var productId = document.getElementById("productId").value;

    for (var i = 0; i < array.length; i++)
    {
        if(array[i].productoId == productId)
        {
            document.getElementById("category").innerHTML = array[i].categoriaId;
            document.getElementById("branch").innerHTML = array[i].marcaId;
        }
    }
}

<div>
	ProductoID: <input type="text" id="productId" /> <input type="button" value="Buscar" onclick="showProduct()">
</div>
<hr>
<table>
    <tr><td>Marca</td><td id="branch"></td></tr>
    <tr><td>Categoría</td><td id="category"></td></tr>
</table>

answered by 10.05.2017 в 18:44

0

Try doing this

for (i in array) {
    var categoriaId = array[i].categoriaId;
    document.write(+categoriaId);
}

Greetings

answered by 10.05.2017 в 18:13

Enable or disable an edittext with the selection of a spinner Queue without duplicate entries

score 0 · Accepted Answer

You can do it by going through the array recursively with a for (in) , the interesting thing about this example that I leave here is that you can search for any field of the array , besides it adapts to any JSON regardless of its structure, that is, if the JSON gets to change, this function will adjust to the new structure without having to touch the code.

Example:

var array = [
    {"productoId":"4","categoriaId":null,"marcaId":"2"},
    {"productoId":"87","categoriaId":null,"marcaId":"2"},
    {"productoId":"175","categoriaId":null,"marcaId":"20"}
], item = [];

itemTitle(array);

function itemTitle(array) {
 for (n in array) {
  if (typeof array[n] == "object" && array[n] != null) {
   itemTitle(array[n]);
  } else if (!(n in item)) {
   item[n] = "ok";
   var opt = document.createElement("option");
   opt.text = n;
   document.getElementById("item").add(opt);
  };
 };
};
function initSearch() {
 document.getElementById("myList").innerHTML="";
 var x = document.getElementById("item"),
 item = x.options[x.selectedIndex].text,
 value = document.getElementById("search").value;
 search(array,item,value);
}
function search(array,item,value) {
 for (n in array) {
  if (n == item && array[n] == value) {
   display(array);
  } else {
   if (typeof array[n] == "object")
    search(array[n],item,value);
  };
 };
};
  
function display(array) {
 for (n in array) {
  var ul = document.createElement("ul");
  var li = document.createElement("li");
  var text = document.createTextNode(n+": "+array[n]);
  li.appendChild(text);
  ul.appendChild(li);
   document.getElementById("myList").appendChild(ul);     
 };
};

<table>
 <tr>
  <th>Busqueda por</th>
  <th>Valor a Consultar</th>
 </tr>
 <tr>
  <td><select id="item"></select></td>
  <td><input id="search" onChange="initSearch();"><button onClick="initSearch();">buscar</button></td>
 </tr>
</table>
<div id="myList"></div>