Question

我在这里有我的JSON： https://558b3eea-2ddb-4ba7-8c1f-b2ded681a17b-bluemix.cloudant.com/iotp_3f6oqn_default_2017-05-09/_all_docs?include_docs=true

这是我的HTML代码，我在其中提取de data“Distance”进行一些计算：

<!DOCTYPE html>
  <html>
    <head>
        <title>Proyecto Final-Nivel del agua</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="app-wrapper flex -nowrap">
            <section class="app-section">
            <div class="app-section__wrapper flex--col -nowrap -justify-center h-talign-center">
                <h1 class="app-name">Ag&#252ita</h1>
                <p class="p--lead">P&#225gina para conocer los litros de agua almacenados en un dep&#243sito circular
                </p>
                <button class="app-section__action-btn js-next" (click)="nextSection('Configure')">Comienza <i class="fa fa-long-arrow-right"></i></button>
            </div>
            </section>
            <section class="app-section h-bkg-primary">
                <div class="app-section__wrapper">
                    <div class="form" >
                        <h1 class="header -h4 h-color-white">Calcula el nivel del agua</h1>
                        <p class="h-color-white">Ingresa las medidas</p>
                        <div class="form__group flex -justify-between">
                            <input type="number" id="alt" min="1" name="altura" placeholder="Altura cm" required />
                            <input type="number" id="diam" min="1" name="diametro" placeholder="Diametro cm" required />

                        </div>
                        <button onclick = "volumen()" class="app-section__action-btn js-next h-color-white" type="submit">Calcular <i class="fa fa-long-arrow-right"></i></button>
                        <p class="h-color-white">Capacidad total: </p> 
                        <p id= "total" class="h-color-white"> </p>   
                        <p class="h-color-white">Capacidad actual: </p> <p id= "actual" class="h-color-white"> </p>               
                    </div>
                </div>
            </section>
            <section class="app-section">
              <div class="app-section__wrapper -full-width">
                  <div class="app-section__header h-wrapper-padding">
                      <h1 class="header -h4">Resultado en litros:</h1>
                  </div>
              </div>
            </section>
        </div>
        <script>
            function volumen(){
                var diameter = document.getElementById("diam").value;
                var height = document.getElementById("alt").value;
                var radio = diameter/2;
                var total = Math.PI * (radio*radio)*height;

                document.getElementById("total").innerHTML = total + " ml";

                //Get JSON data
                var json = document.createElement('script');
                // assing src with callback name
                json.src = 'https://558b3eea-2ddb-4ba7-8c1f-b2ded681a17b-bluemix.cloudant.com/iotp_3f6oqn_default_2017-05-09/_all_docs?include_docs=true?callback=insertReply';
                // insert script to document and load content
                document.body.appendChild(json);

                //here's where the number from data: d: distance is kept
                var distance =  json;
                var actual = Math.PI * (radio*radio)*distance;
                document.getElementById("actual").innerHTML = actual + " ml";
            }

        </script>
    </body>
</html>

我面临的唯一问题是我不知道如何从JSON中提取特定数据。

我想要获取的数据来自第一行。行 - ＆gt; doc - ＆gt;数据 - ＆gt; d - ＆gt;距离 - ＆gt;号码我想要的。

Answer 1

你只想要距离第一行的距离吗？

我从你的json那里拿了一个样本，因为服务器不允许我因CORS请求它。

var json = {"total_rows":1108,"offset":0,"rows":[
{"id":"000d02d0-34e4-11e7-8bab-a1ec0ee7267d","key":"000d02d0-34e4-11e7-8bab-a1ec0ee7267d","value":{"rev":"1-f0b36f3b374d57422ac6f254dca28690"},"doc":{"_id":"000d02d0-34e4-11e7-8bab-a1ec0ee7267d","_rev":"1-f0b36f3b374d57422ac6f254dca28690","deviceType":"RaspberryPi2","deviceId":"b827eb5bf326","eventType":"event","format":"json","timestamp":"2017-05-09T18:19:11.613Z","data":{"d":{"Distance":" 21"}}}},
{"id":"003a67f0-3482-11e7-8bab-a1ec0ee7267d","key":"003a67f0-3482-11e7-8bab-a1ec0ee7267d","value":{"rev":"1-64f67e907b68c2f8a3b865e61d0e9a26"},"doc":{"_id":"003a67f0-3482-11e7-8bab-a1ec0ee7267d","_rev":"1-64f67e907b68c2f8a3b865e61d0e9a26","deviceType":"RaspberryPi2","deviceId":"b827eb5bf326","eventType":"event","format":"json","timestamp":"2017-05-09T06:37:41.231Z","data":{"d":{"Distance":" 15"}}}},
{"id":"00a67030-3482-11e7-acb9-75e578a1a06b","key":"00a67030-3482-11e7-acb9-75e578a1a06b","value":{"rev":"1-5659fe0701ab61a210985bd384fd11e1"},"doc":{"_id":"00a67030-3482-11e7-acb9-75e578a1a06b","_rev":"1-5659fe0701ab61a210985bd384fd11e1","deviceType":"RaspberryPi2","deviceId":"b827eb5bf326","eventType":"event","format":"json","timestamp":"2017-05-09T06:37:41.939Z","data":{"d":{"Distance":" 15"}}}},
{"id":"00e21b33-34e6-11e7-a63a-d1375d2a38ae","key":"00e21b33-34e6-11e7-a63a-d1375d2a38ae","value":{"rev":"1-b93e665a9a330d9e8d01cb81425f7d5f"},"doc":{"_id":"00e21b33-34e6-11e7-a63a-d1375d2a38ae","_rev":"1-b93e665a9a330d9e8d01cb81425f7d5f","deviceType":"RaspberryPi2","deviceId":"b827eb5bf326","eventType":"event","format":"json","timestamp":"2017-05-09T18:33:32.003Z","data":{"d":{"Distance":" 20"}}}},
{"id":"00fa1a90-34e7-11e7-acb9-75e578a1a06b","key":"00fa1a90-34e7-11e7-acb9-75e578a1a06b","value":{"rev":"1-c176bfcd4f81c0c878fd44d001d5f936"},"doc":{"_id":"00fa1a90-34e7-11e7-acb9-75e578a1a06b","_rev":"1-c176bfcd4f81c0c878fd44d001d5f936","deviceType":"RaspberryPi2","deviceId":"b827eb5bf326","eventType":"event","format":"json","timestamp":"2017-05-09T18:40:41.657Z","data":{"d":{"Distance":" 21"}}}},
{"id":"011f7b20-345e-11e7-a249-034435a59d02","key":"011f7b20-345e-11e7-a249-034435a59d02","value":{"rev":"1-7c4609b2e46457900daa2cc12a534da2"},"doc":{"_id":"011f7b20-345e-11e7-a249-034435a59d02","_rev":"1-7c4609b2e46457900daa2cc12a534da2","deviceType":"RaspberryPi2","deviceId":"b827eb5bf326","eventType":"event","format":"json","timestamp":"2017-05-09T02:20:00.850Z","data":{"d":{"Distance":" 11"}}}}]}

var distance = json.rows[0].doc.data.d.Distance;
console.log(distance);

使用HTML和JavaScript获取JSON的特定部分

1 个答案: