根据用户输入搜索 JSON RESTful API

Question

我正在处理一个个人项目，其中我正在获取某个 JSON 文件（RESTful API）。 然后，用户输入他们想要的任何内容，然后它将返回一个特定的值（比如说价格）。

这是我的代码：

// FETCH JSON

fetch('http://phisix-api4.appspot.com/stocks.json')
    .then(response => {
        return response.json()
    })
.then(data => {
        console.log(data)
        var data = JSON.parse(this.response)
    })
.catch(err => {
    // Do something for an error here
})

从标题为'FETCH JSON'的代码中，我成功地从 web 服务器获取数据。 我能够控制台记录数据。

下一个活动是用户在 HTML 输入框中键入名称。 我的代码应该将用户键入的内容存储到变量中。 我也成功了。 看我的代码。

// USER INPUT NAME

function getUserTick() {
    var x = document.getElementById('stocktickerinput').value;
}

现在（这里是）问题，使用variable x ，我试图通过此代码搜索 JSON 响应：

var obj = data
for (var i = 0; i <= 243; i++){
  // look for the entry with a matching `code` value
  if (obj.stock[i].name == x){
    console.log('hey, i found it!')
  }
}

我找不到返回正确的值。 似乎搜索数据的循环代码都是错误的。

在这里看我的小提琴： https://jsfiddle.net/c3x16d5s/1/

我不确定应该如何处理 JSON 响应以及如何搜索用户输入。 有谁能帮忙吗？

Answer 1

通常，在脚本的较高位置启动变量是保证访问正在进行的函数的可靠方法。 我做了一些假设，因为我实际上看不到您的object的结构，也看不到x的值，尽管您的语法看起来是正确的。 检查这是否有效！

let x = document.getElementById('stocktickerinput').value;
let obj;

fetch('http://phisix-api4.appspot.com/stocks.json')
    .then(response => {
        return response.json()
    })
.then(data => {
        console.log(data)
        obj = JSON.parse(data)
    })
.catch(err => {
    // Do something for an error here
})

function getUserTick() {
    for (let i = 0; i <= 243; i++){
  // look for the entry with a matching `code` value
    if (obj.stock[i].name == x){
      console.log('hey, i found it!')
    }
  } 
}

getUserTick()

Answer 2

您可以使用过滤器方法循环遍历您的数据并获取 json 数据的特定内容。

所以你可以输入这个而不是for循环。

const result = obj.stock.filter(stock => stock.name == x)

if (result) {
  console.log("Found it")
}