Hướng dẫn javascript get json from url to variable - javascript lấy json từ url thành biến

Tôi có dữ liệu JSON trong URL, tôi muốn lấy tất cả dữ liệu JSON từ URL bằng JavaScript (không có jQuery) và đưa nó vào biến

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

Dữ liệu JSON:

 [
  {
    "uniq":"AXk2_U9l"
  },
  {
    "uniq":"AX0apLOG"
  },
  {
    "uniq":"AXrGmWk4"
  },
  {
    "uniq":"AXID1Psx"
  },
  {
    "uniq":"vovs2aPlj"
  }
]

Và mã JavaScript của tôi, mã này không hoạt động:

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Nếu có một phương pháp mới, xin vui lòng hiển thị.

MPLUNGJAN

161K27 Huy hiệu vàng170 Huy hiệu bạc228 Huy hiệu đồng27 gold badges170 silver badges228 bronze badges

Đã hỏi ngày 4 tháng 5 năm 2019 lúc 5:42May 4, 2019 at 5:42

3

Bạn cần bao bọc mã của mình bên trong mẫu Async/Await

Trong mã của bạn, bạn đã không trả lại bất cứ điều gì.

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

<div id="tags"></div>

Đã trả lời ngày 4 tháng 5 năm 2019 lúc 6:00May 4, 2019 at 6:00

Hien Nguyễn NguyễnHien Nguyen

23.7K7 Huy hiệu vàng 50 Huy hiệu bạc58 Huy hiệu Đồng7 gold badges50 silver badges58 bronze badges

3

Bạn có thể làm điều đó bằng cách sử dụng xmlhttprequest như sau

function loadJson() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     var tags = JSON.parse(this.responseText);
     console.log(tags);
    }
  };
  xhttp.open("GET", "https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json", true);
  xhttp.send();
}
loadJson();

Đã trả lời ngày 4 tháng 5 năm 2019 lúc 6:15May 4, 2019 at 6:15

Shijin Trshijin trShijin TR

7.29810 Huy hiệu vàng48 Huy hiệu bạc118 Huy hiệu đồng10 gold badges48 silver badges118 bronze badges

1

Cuộc gọi của bạn không được giải quyết không đồng bộ nên các thẻ trống

Đây là cách tiêu chuẩn để sử dụng Fetch:

fetch('https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json')
  .then(
    response => {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    })
  .catch(err => console.log('Fetch Error :-S', err));

Đã trả lời ngày 4 tháng 5 năm 2019 lúc 6:29May 4, 2019 at 6:29

MPLUNGJANMPLUNGJANmplungjan

161K27 Huy hiệu vàng170 Huy hiệu bạc228 Huy hiệu đồng27 gold badges170 silver badges228 bronze badges

1

Sửa đổi lần cuối ngày 16 tháng 6 năm 2022

JavaScript Đọc JSON từ hướng dẫn URL chỉ ra cách đọc dữ liệu ở định dạng JSON từ URL được cung cấp. Chúng tôi sử dụng JQuery, Fetch API và XMLHTTPREQUEST.

URL

Trình định vị tài nguyên thống nhất (URL), là tham chiếu đến tài nguyên web chỉ định vị trí của nó trên mạng máy tính và cơ chế truy xuất nó. Tài nguyên web là bất kỳ dữ liệu nào có thể thu được thông qua Web, chẳng hạn như tài liệu HTML, tệp PDF, hình ảnh PNG, dữ liệu JSON hoặc văn bản thuần túy.

Một URL chung có dạng sau:

scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]

Các dấu ngoặc vuông chỉ ra rằng phần là tùy chọn. Một sơ đồ là một cách giải quyết các tài nguyên, chẳng hạn như HTTP, FTP, Mailto hoặc File.

Phần sau hai dấu gạch chéo được gọi là phần chính quyền. Phần thẩm quyền chứa 1) một phần xác thực tùy chọn của tên người dùng và mật khẩu, được phân tách bằng dấu hai chấm, theo sau là ký hiệu AT (@) 2) Số cổng tùy chọn, tách biệt với máy chủ bằng dấu hai chấm.

Một con đường là một con đường đến tài nguyên trên máy chủ. Nó có thể hoặc không giống hoặc ánh xạ chính xác đến đường dẫn hệ thống tệp. Chuỗi truy vấn được sử dụng để thêm một số tiêu chí vào yêu cầu tài nguyên. Nó thường là một chuỗi các cặp khóa/giá trị. Phần cuối cùng là một đoạn tùy chọn, chỉ ra một tài nguyên thứ cấp, chẳng hạn như tiêu đề. Nó được tách ra khỏi chuỗi truy vấn bằng một hàm băm (#).

Json

JSON (Ký hiệu đối tượng JavaScript) là một định dạng liên kết dữ liệu nhẹ. Thật dễ dàng cho con người đọc và viết và cho máy móc để phân tích và tạo ra. Loại phương tiện truyền thông Internet chính thức cho JSON là

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

Trong các ví dụ của chúng tôi, chúng tôi sử dụng dữ liệu JSON từ

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

{
   "time": "11:27:26 AM",
   "milliseconds_since_epoch": 1494934046126,
   "date": "05-16-2017"
}

Yêu cầu nhận trả về chuỗi JSON này.

Đọc JSON với JQuery

JQuery là một thư viện JavaScript được sử dụng để thao túng DOM. Với jQuery, chúng ta có thể tìm thấy, chọn, di chuyển và thao tác các phần của tài liệu HTML.

Phương thức jQuery

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

jQuery.getJSON( url [, data ] [, success ] )

Đây là chữ ký phương pháp. Tham số

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

JS_READ_JSON_URL.HTML

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Trong ví dụ, chúng tôi đọc dữ liệu JSON từ

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Chúng tôi xây dựng thông báo bằng chuỗi mẫu JavaScript.

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Với phương thức

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

Trong hình chúng ta có thể thấy ngày, thời gian và thời gian Unix hiện tại.

Đọc JSON với API tìm nạp

API tìm nạp là giao diện để tìm nạp tài nguyên. Nó tương tự như

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Ví dụ đọc dữ liệu JSON với API tìm nạp và in dữ liệu được trả về vào bảng điều khiển. Để xem đầu ra, chúng ta cần kích hoạt bảng điều khiển nhà phát triển của trình duyệt của chúng tôi.

Phương thức

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

Đọc JSON với xmlhttprequest

XMLHTTPREQUEST API cung cấp chức năng khách để truyền dữ liệu giữa máy khách và máy chủ. Nó cho phép một cách dễ dàng để lấy dữ liệu từ URL mà không cần phải làm mới trang đầy đủ. Do đó, một trang web phải cập nhật chỉ là một phần của trang mà không làm gián đoạn những gì người dùng đang làm.

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Ví dụ này đọc dữ liệu JSON với

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Một ví dụ mới của

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Phương thức

<div id="tags"></div>

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Giá trị

<div id="tags"></div>

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

Trong phương thức

<div id="tags"></div>

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

Phương thức

<div id="tags"></div>

Trong bài viết này, chúng tôi đã đọc dữ liệu JSON trong JavaScript với JQuery, Fetch API và XMLHTTPREQUEST.

Liệt kê tất cả các hướng dẫn JavaScript.

Làm thế nào hiển thị dữ liệu JSON từ URL trong HTML?

Chúng ta có thể đọc dữ liệu JSON trực tiếp từ dịch vụ web qua HTTP không?

Làm thế nào lấy dữ liệu JSON từ tìm nạp?

JQuery getjson là gì?