对象访问

Question

我一直在开发一个必须显示从API检索到的数据的网站，但我并不熟悉Javascript。即使在完成了一些教程并在Stack Overflow上查找其他主题之后，我似乎也不了解逻辑。所以我希望这里的任何人都可以帮助我。

现在我从指定的API中提取数据，例如：

$.get( "https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=EUR",
    function( data ) {
        $( '#btcwaarde' ).text( data["EUR"] );
    }
);

这实际上有效，但仅用于检索每个API请求的1个数据。我想做的是从更大的JSON数据中检索数据，例如：来自a result like this。

要做到这一点，我需要了解我应该使用哪个函数和数组逻辑。我也看过JSON.parse，但我真的不明白它是如何运作的。

有人可以向我解释一下，或者给我一个我可以用来进一步构建代码的例子吗？

编辑我想要实现的是在我的网站上的HTML元素中显示数据。所以HTML将是这样的：

<div class="element">
     <span id="BTCprice"></span>
     <span id="BTCmktcap"></span>
</div>
<div class="element">
    <span id="ETHprice"></span>
    <span id="ETHmktcap"></span>
</div>

然后，唯一的<span>必须显示从与<span>相关的API中提取的数据。

例如，#BTCprice必须显示来自[DISPLAY][BTC][EUR][PRICE]的信息，而#ETHmktcap必须显示来自[DISPLAY][ETH][EUR][MKTCAP]的信息。

Answer 1

OP编辑后。更复杂的溶剂：

$(function() {

 $.get( "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH,DASH,LTC,XRP&tsyms=EUR", function( data ) {
  $.each(data['DISPLAY'], function( index, value ) {

    var spanPrice = $('<span/>')
        .attr('id', index+"price")
        .html(value['EUR']['PRICE']);

    var spanMktcap = $('<span/>')
        .attr('id', index+"mktcap")
        .html(value['EUR']['MKTCAP']);

    var $newDiv = $("<div/>")   // creates a div element
        .attr("id", index)  // adds the id
        .addClass("element")   // add a class
        .append(spanPrice)
        .append(spanMktcap)

         $("code").append($newDiv);
  });
});

});

https://jsfiddle.net/d3gzz6x1/

Answer 2

对象访问

以下是在更新问题之前发布的;请参阅下面的答案更新：

如果不知道完全您希望如何访问数据，很难提供一个答案，向您显示完全您希望实现的目标。< / p>

但基本上，an object in JavaScript有一个key: value结构，可以访问in many different ways，使用哪种方式取决于具体情况。

＆＃13;

var req = new XMLHttpRequest();
req.addEventListener( "readystatechange", function() {
  if ( req.readyState === 4 ) {
    if ( req.status === 200 ) {
      var rt = req.responseText, // this is a string
          json = JSON.parse( rt ); // parse the string to an object
      // access the object values
      console.log( json[ "RAW" ][ "BTC" ][ "EUR" ][ "TYPE" ] );
      // or
      console.log( json.RAW.BTC.EUR.TYPE );
    } else if ( req.status ) {
      console.warn( req.status );
    } else {
      console.error( "Danger Will Robinson!" );
    }
  }
}, false );
req.open( "GET", "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH,DASH,LTC,XRP&tsyms=EUR", true );
req.setRequestHeader( "Accept", "application/json" );
req.send();

＆＃13;

更新（如上所述）

你在这里有几个选择;您可以填充硬编码的HTML，也可以根据需要动态创建新的HTML。

<强>人口

由于HTML元素已经到位，您可以使用地图来告诉您填充它们的内容。这可能比通过将id更改为更接近通过json到数据的路径来证明更为动态，但是对于一个简单的演示：

＆＃13;

function updateHTML( json ) {
  const lookup = function( id ) {
      return { "BTCprice":  json.DISPLAY.BTC.EUR.PRICE,
               "BTCmktcap": json.DISPLAY.BTC.EUR.MKTCAP,
               "ETHprice":  json.DISPLAY.ETH.EUR.PRICE,
               "ETHmktcap": json.DISPLAY.ETH.EUR.MKTCAP
               // etc.
      }[ id ] || "Unknown";
    },
    spans = document.querySelectorAll( "span[id]" );
  spans.forEach( function( v ) {
    v.textContent = lookup( v.id );
  } );
}

function requestStuff( addr ) {
  var req = new XMLHttpRequest(), sts;
  req.addEventListener( "readystatechange", function() {
    if ( req.readyState === 4 ) {
      sts = req.status;
      if ( sts === 200 ) {
        updateHTML( JSON.parse( req.responseText ) );
      } else if ( sts ) {
        console.warn( sts );
      } else {
        console.error( "Danger Will Robinson!" );
      }
  	}
  }, false );
  req.open( "GET", addr, true );
  req.setRequestHeader( "Accept", "application/json" );
  req.send();
}

requestStuff( "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH,DASH,LTC,XRP&tsyms=EUR" );

＆＃13;

span:before {
    content: attr( id ) ": ";
}
span:first-child:after {
    content: ", ";
}

＆＃13;

<div class="element">
     <span id="BTCprice"></span>
     <span id="BTCmktcap"></span>
</div>
<div class="element">
    <span id="ETHprice"></span>
    <span id="ETHmktcap"></span>
</div>

＆＃13;

动态创作

这将是一个与上面非常相似的过程，但是我们不是映射到已经存在的HTML，而是根据需要构建它，使用嵌套数组的对象作为构建内容的地图以及我们填充它的地图。

＆＃13;

function updateHTML( json ) {
  const props = {
    "BTC": [ [ "BTCprice",  json.DISPLAY.BTC.EUR.PRICE ],
             [ "BTCmktcap", json.DISPLAY.BTC.EUR.MKTCAP ] ],
    "ETH": [ [ "ETHprice",  json.DISPLAY.ETH.EUR.PRICE ],
             [ "ETHmktcap", json.DISPLAY.ETH.EUR.MKTCAP ] ]
    };
  var prop, div, span;
  for ( prop in props ) {
    if ( props.hasOwnProperty( prop ) ) {
      div = document.createElement( "div" );
      props[ prop ].forEach( function( v ) {
        span = document.createElement( "span" );
        span.textContent = v[ 1 ];
        span.id = v [ 0 ];
        div.appendChild( span );
      } );
      document.body.appendChild( div );
    }
  }
}

function requestStuff( addr ) {
  var req = new XMLHttpRequest(), sts;
  req.addEventListener( "readystatechange", function() {
    if ( req.readyState === 4 ) {
      sts = req.status;
      if ( sts === 200 ) {
        updateHTML( JSON.parse( req.responseText ) );
      } else if ( sts ) {
        console.warn( sts );
      } else {
        console.error( "Danger Will Robinson!" );
      }
  	}
  }, false );
  req.open( "GET", addr, true );
  req.setRequestHeader( "Accept", "application/json" );
  req.send();
}

requestStuff( "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH,DASH,LTC,XRP&tsyms=EUR" );

＆＃13;

span:before {
    content: attr( id ) ": ";
}
span:first-child:after {
    content: ", ";
}

＆＃13;

为什么没有用jQuery编写的演示？

正如你（OP）在问题中所述：

我对Javascript并不熟悉。即使在阅读了一些教程并在Stack Overflow上查找其他主题之后，我似乎也不了解逻辑。

由于jQuery是一个JavaScript库，为了更好地理解如何使用它，您首先应该对vanilla JavaScript有一个基本的了解。

DOM操作，在数组和对象之间读取和写入数据，使异步HTTP请求等。是JS的支柱。

我在JavaScript中编写了演示，以更好地展示实际发生的情况。

一旦熟悉JS，就学习并使用jQuery。

如何将结构化API数据提取到HTML（JSON.parse？）

2 个答案:

对象访问

更新（如上所述）

为什么没有用jQuery编写的演示？