个人中心
gpt4 book ai didi

JavaScript:如何从 JavaScript 文件中检索数据并以表格格式呈现它？文件名是 "TestData.js"

转载 作者：行者123 更新时间：2023-12-01 03:11:01 25 4
gpt4 key购买 nike

我想将 javascript 文件中的数据呈现为表格格式，如图所示。

This is the desired tabular format

彩色向上和向下箭头表示数字的变化(激增或下降)。黄色/公司旁边的绿/红点表示公司的估值吸引力 - 黄色 -一般，绿色 - 有吸引力，红色 - 没有吸引力。

Javascript文件(TestData.js)的内容

var portfolio = [
  {
    "current_price": 1626.0,
    "ticker_symbol": "HDFCBANK.NS",
    "in_watchlist": true,
    "valuation": "fair",
    "symbol": "HDFCBANK",
    "returns_percentage": 29.777877102106267,
    "daily_percentage": 0.5,
    "count": 5,
    "marketcap": "Large Cap",
    "name": "HDFC Bank",
    "industry": "Financials",
    "avg_buy_price": 1252.9100000000003
  },
  {
    "current_price": 7064.8,
    "ticker_symbol": "MARUTI.NS",
    "in_watchlist": false,
    "valuation": "attractive",
    "symbol": "MARUTI",
    "returns_percentage": 14.961719023326577,
    "daily_percentage": 1.1,
    "count": 1,
    "marketcap": "Large Cap",
    "name": "Maruti Suzuki",
    "industry": "Automobiles",
    "avg_buy_price": 6145.35
  },
  {
    "current_price": 1091.15,
    "ticker_symbol": "EMAMILTD.NS",
    "in_watchlist": true,
    "valuation": "fair",
    "symbol": "EMAMILTD",
    "returns_percentage": 7.405463046509734,
    "daily_percentage": 0.1,
    "count": 6,
    "marketcap": "Large Cap",
    "name": "Emami",
    "industry": "FMCG",
    "avg_buy_price": 1015.9166666666666
  },
  {
    "current_price": 1493.6,
    "ticker_symbol": "YESBANK.NS",
    "in_watchlist": true,
    "valuation": "unattractive",
    "symbol": "YESBANK",
    "returns_percentage": 5.1942106560552,
    "daily_percentage": 2.0,
    "count": 4,
    "marketcap": "Large Cap",
    "name": "Yes Bank",
    "industry": "Financials",
    "avg_buy_price": 1419.8500000000001
  },
  {
    "current_price": 1477.7,
    "ticker_symbol": "INDUSINDBK.NS",
    "in_watchlist": false,
    "valuation": "fair",
    "symbol": "INDUSINDBK",
    "returns_percentage": 20.33265133701815,
    "daily_percentage": 1.1,
    "count": 4,
    "marketcap": "Large Cap",
    "name": "Indusind Bank",
    "industry": "Financials",
    "avg_buy_price": 1228.0125
  }
];

var hdfc_stock_data = {
  "stock": {
    "stock_price": "1,626",
    "growth_history": [
      {
        "growth": 0.5,
        "label": "1 Day"
      },
      {
        "growth": 4.1,
        "label": "1 Week"
      },
      {
        "growth": 4.7,
        "label": "1 Mo"
      },
      {
        "growth": 38.5,
        "label": "1 Yr"
      },
      {
        "growth": 27.6,
        "label": "5 Yr"
      },
      {
        "growth": 22.5,
        "label": "10 Yr"
      }
    ],
    "short_name": "HDFC Bank",
    "industry_name": "Bank - Private",
    "current_price": "1,626",
    "yearly_growth": 17.3,
    "symbol": "HDFCBANK",
    "industry": "Financials > Bank - Private",
    "graphs": {
      "stock_price": {
        "values": [
          null, null, null, 189.959795109746, 197.71928584431, 219.970607249454, 307.678835624819, 281.625310309537, 249.119276388136, 227.100294661012, 188.794277595195, 169.215123451412, 258.013509416648, 276.27126381467, 322.691660573649, 323.487845020358, 367.61921149505, 405.780443764135, 447.07583943518, 409.987251223347, 448.565660818427, 461.007917141224, 437.402813351776, 488.791340421378, 509.46681790125, 572.204908113496, 626.12896425413, 635.592297266244, 659.238528347662, 617.448102158967, 647.100254100593, 654.104507275281, 776.032203654182, 825.764714228535, 911.757260470622, 1036.6605724851, 997.749806712709, 1065.40547367068, 1068.48023694246, 1021.91245126184, 1133.84375294572, 1247.825, 1220.8, 1318.15, 1626.0
        ]
      },
      "x_axis": {
        "values": [
          "Mar06", "Jun06", "Sep06", "Dec06", "Mar07", "Jun07", "Sep07", "Dec07", "Mar08", "Jun08", "Sep08", "Dec08", "Mar09", "Jun09", "Sep09", "Dec09", "Mar10", "Jun10", "Sep10", "Dec10", "Mar11", "Jun11", "Sep11", "Dec11", "Mar12", "Jun12", "Sep12", "Dec12", "Mar13", "Jun13", "Sep13", "Dec13", "Mar14", "Jun14", "Sep14", "Dec14", "Mar15", "Jun15", "Sep15", "Dec15", "Mar16", "Jun16", "Sep16", "Dec16", "Mar17"
        ]
      }
    }
  }
};

单击 HDFC Bank 会显示另一个图表，其中包含股票价格并列出股票价格不同时期的变化 - 1 天、周、月、年、5 年和 10 年(TestData.js 中提供数据)。

Graph on clicking HDFC

最佳答案

添加以下脚本

**

var str1,i, j,len, jLen;
var key = Object.keys(portfolio[0]);
str1 = "<table>" + "<tr>" + "<th>" ;
for(j=0,jLen = key.length;j < jLen;j++){
str1 += key[j] + "<th>";
}
str1 += "<tr>" +"<td>";
for(i=0,len=portfolio.length;i<len;i++) {
for(j=0,jLen=key.length;j<jLen;j++){
str1 += portfolio[i][key[j]] + "<td>";
}
str1 += "</tr><tr>"
}
str1 += "</table>"
$("#main").append(str1);

**

var portfolio = [
  {
    "current_price": 1626.0,
    "ticker_symbol": "HDFCBANK.NS",
    "in_watchlist": true,
    "valuation": "fair",
    "symbol": "HDFCBANK",
    "returns_percentage": 29.777877102106267,
    "daily_percentage": 0.5,
    "count": 5,
    "marketcap": "Large Cap",
    "name": "HDFC Bank",
    "industry": "Financials",
    "avg_buy_price": 1252.9100000000003
  },
  {
    "current_price": 7064.8,
    "ticker_symbol": "MARUTI.NS",
    "in_watchlist": false,
    "valuation": "attractive",
    "symbol": "MARUTI",
    "returns_percentage": 14.961719023326577,
    "daily_percentage": 1.1,
    "count": 1,
    "marketcap": "Large Cap",
    "name": "Maruti Suzuki",
    "industry": "Automobiles",
    "avg_buy_price": 6145.35
  },
  {
    "current_price": 1091.15,
    "ticker_symbol": "EMAMILTD.NS",
    "in_watchlist": true,
    "valuation": "fair",
    "symbol": "EMAMILTD",
    "returns_percentage": 7.405463046509734,
    "daily_percentage": 0.1,
    "count": 6,
    "marketcap": "Large Cap",
    "name": "Emami",
    "industry": "FMCG",
    "avg_buy_price": 1015.9166666666666
  },
  {
    "current_price": 1493.6,
    "ticker_symbol": "YESBANK.NS",
    "in_watchlist": true,
    "valuation": "unattractive",
    "symbol": "YESBANK",
    "returns_percentage": 5.1942106560552,
    "daily_percentage": 2.0,
    "count": 4,
    "marketcap": "Large Cap",
    "name": "Yes Bank",
    "industry": "Financials",
    "avg_buy_price": 1419.8500000000001
  },
  {
    "current_price": 1477.7,
    "ticker_symbol": "INDUSINDBK.NS",
    "in_watchlist": false,
    "valuation": "fair",
    "symbol": "INDUSINDBK",
    "returns_percentage": 20.33265133701815,
    "daily_percentage": 1.1,
    "count": 4,
    "marketcap": "Large Cap",
    "name": "Indusind Bank",
    "industry": "Financials",
    "avg_buy_price": 1228.0125
  }
];

var hdfc_stock_data = {
  "stock": {
    "stock_price": "1,626",
    "growth_history": [
      {
        "growth": 0.5,
        "label": "1 Day"
      },
      {
        "growth": 4.1,
        "label": "1 Week"
      },
      {
        "growth": 4.7,
        "label": "1 Mo"
      },
      {
        "growth": 38.5,
        "label": "1 Yr"
      },
      {
        "growth": 27.6,
        "label": "5 Yr"
      },
      {
        "growth": 22.5,
        "label": "10 Yr"
      }
    ],
    "short_name": "HDFC Bank",
    "industry_name": "Bank - Private",
    "current_price": "1,626",
    "yearly_growth": 17.3,
    "symbol": "HDFCBANK",
    "industry": "Financials > Bank - Private",
    "graphs": {
      "stock_price": {
        "values": [
          null, null, null, 189.959795109746, 197.71928584431, 219.970607249454, 307.678835624819, 281.625310309537, 249.119276388136, 227.100294661012, 188.794277595195, 169.215123451412, 258.013509416648, 276.27126381467, 322.691660573649, 323.487845020358, 367.61921149505, 405.780443764135, 447.07583943518, 409.987251223347, 448.565660818427, 461.007917141224, 437.402813351776, 488.791340421378, 509.46681790125, 572.204908113496, 626.12896425413, 635.592297266244, 659.238528347662, 617.448102158967, 647.100254100593, 654.104507275281, 776.032203654182, 825.764714228535, 911.757260470622, 1036.6605724851, 997.749806712709, 1065.40547367068, 1068.48023694246, 1021.91245126184, 1133.84375294572, 1247.825, 1220.8, 1318.15, 1626.0
        ]
      },
      "x_axis": {
        "values": [
          "Mar06", "Jun06", "Sep06", "Dec06", "Mar07", "Jun07", "Sep07", "Dec07", "Mar08", "Jun08", "Sep08", "Dec08", "Mar09", "Jun09", "Sep09", "Dec09", "Mar10", "Jun10", "Sep10", "Dec10", "Mar11", "Jun11", "Sep11", "Dec11", "Mar12", "Jun12", "Sep12", "Dec12", "Mar13", "Jun13", "Sep13", "Dec13", "Mar14", "Jun14", "Sep14", "Dec14", "Mar15", "Jun15", "Sep15", "Dec15", "Mar16", "Jun16", "Sep16", "Dec16", "Mar17"
        ]
      }
    }
  }
};


**var str1,i, j,len, jLen;
var key = Object.keys(portfolio[0]);
str1 = "<table>" + "<tr>" + "<th>" ;
for(j=0,jLen = key.length;j < jLen;j++){
str1 += key[j] + "<th>";
}
str1 += "<tr>" +"<td>";
for(i=0,len=portfolio.length;i<len;i++) {
for(j=0,jLen=key.length;j<jLen;j++){
str1 += portfolio[i][key[j]] + "<td>";
}
str1 += "</tr><tr>"
}
str1 += "</table>"
$("#main").append(str1);**
<html>
<head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
**<div id="main">**
</div>
</body>
</html>

关于JavaScript:如何从 JavaScript 文件中检索数据并以表格格式呈现它？文件名是 "TestData.js"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45853719/

25 4 0
文章推荐： typescript - Webpack 4，Vue 同时使用 Typescript 类和 JS 代码。
文章推荐： jQuery - 单击时在数组中前后循环。
文章推荐： javascript - 如何访问 iife 之外的函数
文章推荐： javascript - 在 Javascript 中自然搜索带有数字和文本的对象数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com